为什么背景图片四周都是白色呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        /*此处写代码*/
        div{
         position: relative;
         height: 300px;
         width: 600px;
      background-image: url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg") ;
      background-repeat: no-repeat;
      background-clip: content-box;
      background-size: 90%;
            background-position: 65px 150px;
        }
        p{
         position: absolute;
         font-weight: bold;
         font-size: 24px;
         left: 100px;
         top: 20px;
            color: #000;
        }
        span.div_border{
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 300px;
padding: 20px;
border: 20px solid rgba(255, 0, 0, .5);
        }
        span.div_padding{
         position: absolute;
         top: 20px;
         left: 20px;
         width: 560px;
height: 240px;
border-top: 80px solid rgba(0, 0, 0, .5);
border-bottom: 20px solid rgba(0, 0, 0, .5);
border-left:40px solid rgba(0, 0, 0, .5);
border-right:40px solid rgba(0, 0, 0, .5);
        }

    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div></div>
    <p>慕课网（IMOOC）国内做大的IT技能学习平台</p>
<span> </span>
<span></span>
</body>
</html>

Melody_gy 2016-12-27

源自：CSS3背景与渐变 2-15 编程练习

收起

1回答

慕小测回答被采纳获得+3积分 2016-12-27 12:38:37

你设置了background-size: 90%;把图片等比例进行了缩放，解决办法是把 background-image换成background，给background一个背景颜色和url链接图片；另外div_padding只需要设置border宽度为20px即可、宽度和高度同div宽高一致；div的相对定位要给top、left偏移量。如果我帮你解决了问题，可以采纳！

收起回答

Melody_gy 提问者 #1

div{ position: relative; height: 300px; width: 600px; top: 32px;left: 32px; background: url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg") ; background-color: rgba(0, 0, 0, .5); background-repeat: no-repeat; /*background-clip: padding-box; background-origin: padding-box;*/ background-size: 90%; background-position: 40px 100px; 我把代码改成这个样子以后，白色的区域覆盖了。谢谢！

2016-12-27 12:49:10
慕小测回复提问者 Melody_gy #2

不客气哈~互相帮助嘛！

2016-12-27 12:52:42