如何让padding的背景颜色为灰色，并且背景图片为位置保持不动？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        /*此处写代码*/
        div{
            width:300px;
            height:200px;
            border:10px solid rgba(255,0,0,.3);
            padding:20px;
            font-weight:bolder;
            font-size:24px;
            
            background:url('http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg') #ccc center bottom no-repeat;
    
            background-origin:content-box;
            background-clip:content-box;
            
            background-size: 90%;
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div>慕课网是国内最大的还机构</div>
</body>
</html>

LelesSara 2017-07-21

源自：CSS3背景与渐变 2-6 背景图像定位（ background-origin）

收起

2回答

小丸子爱吃菜 2017-07-21 17:41:27

因为background-clip: content-box;的意思是背景被裁剪到内容框。

你要是就是想写这个属性，那么写成background-clip:padding-box;背景被裁剪到内边距框。

这些属性课程中老师都有讲，视频还是要好好看！

收起回答

卡布琦诺 2017-07-21 09:47:12

去掉这一句background-clip:content-box;即可，祝学习愉快！

收起回答

Seattle0 #1

为什么为什么？

2017-07-21 17:25:53
卡布琦诺回复 Seattle0 #2

background-clip 属性规定背景的绘制区域。content-box表示背景被裁剪到内容框。譬如：<div id="MyDIV"></div>#MyDIV{padding:25px;border:10px dotted #000000;background-color:yellow;background-clip:content-box;}希望可以帮到你！

2017-07-21 17:53:59