为什么边框颜色没有变成半透明，并且有一圈白色的东西

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        /*此处写代码*/
        *{margin:0;
         padding:0;
        
        }
 
         div{width:800px;
         height:400px;
         padding:20px;
         border:50px solid red;
         background:url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg")no-repeat center center;
         background-color: rgba(0, 0, 0, .5);
         background-clip: border-box;
         background-clip: padding-box;
         background-clip: content-box;
         text-align: center;
         background-size: 90%;
          
          
 
 
         }
 
         span.div_border{position:absolute;
         top:0;
         left:0;
         width:800px;
         height:400px;
          
          
 
         span.div_padding{position: absolute;
         top:50px;
         left:50px;
         width:800px;
         height: 400px;
     }
 
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div>慕课网(IMOOC)国内最大的IT技能学习平台</div>
    <span></span>
    <span></span>
 
</body>
</html>

这部分学的有点不太懂，请问边框如何设置成为半透明的颜色，另外不知道为什么边框有一道白色的，还请指点，十分感谢！！

永不止息L 2017-02-07

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

收起

2回答

慕尘roz 回答被采纳获得+3积分 2017-02-07 17:24:49

边框颜色就用你背景色rgba的写法，0.5透明度，rgba(255,0,0,0.5)。白色是你20px的padding，因为background-clip你写了3个，最后一个内容区域覆盖了前面，padding就不在背景范围内了。

收起回答

永不止息L 提问者 #1

我修改代码以后，就实现了要求： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>background属性</title> <style type="text/css"> /*此处写代码*/ *{margin:0; padding:0; } div{width:800px; height:400px; border:10px solid rgba(255,0,0,0.5); background:url("http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg")no-repeat center center; background-color:gray; background-clip: content-box; text-align: center; background-size: 90%; font-weight:bold; background-position:45px 150px; } </style> </head> <body>  <div>慕课网(IMOOC)国内最大的IT技能学习平台</div> </body> </html> 但还是有几个迷惑的地方：1.不知道元素内边距20px怎么实现，因为如果我用了padding:20px就会出现一圈白色边框；2.看到有的人用 background-origin:padding-box;，但我不用这个也实现了，请问下，这个的具体意思是什么，十分感谢！

2017-02-07 23:47:54
慕尘roz 回复提问者永不止息L #2

内边距还是用padding，你这里的问题是background-clip这个属性的设置。background-clip是背景可以显示的区域，超出部分会被裁剪，它包括了背景图片和背景颜色，默认值是border-box。而你这里设为content-box，背景只能在content内容区域显示。padding部分不显示灰色的背景色，所以默认是transparent透明的白色了。而background-origin默认值就是padding-box，就是相对于内边框左上角开始定位背景图片的，它是规定了背景图片从哪里开始定位，即background-position这个属性的参照点，也就是说你写的两个center就是相对于padding-box来说的。

2017-02-08 09:22:40
慕尘roz 回复提问者永不止息L #3

你就把padding：20px加上，然后把background-clip: content-box; 删掉就好了。

2017-02-08 09:24:29