老师，想请教一个问题

为什么设置为何background-clip: padding-box; 而background-origin: content-box; 并且background-origin: content-box后，灰色的背景位置还是以padding-box为准呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background属性</title>
    <style type="text/css">
        /*此处写代码*/
        div{
           width: 500px;
           height: 300px;
           border:10px solid rgba(255,51,0,.5);

           padding: 20px;
           background: url(http://img1.sycdn.imooc.com/climg//582c39c00001091605000150.jpg) no-repeat center bottom;
           background-color: gray;
           background-size: 90%;
           text-align: center;
           font-weight: bolder;
           background-clip: padding-box;
           background-origin: content-box;


        }
    </style>
</head>
<body>
    
    <div><p>慕课网（IMMOC）国内最大的IT技能学习平台</p></div>
</body>
</html>

weixin_慕粉5325704 2019-06-25

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

收起

1回答

卡布琦诺回答被采纳获得+3积分 2019-06-25 17:47:00

1、效果实现的是可以的

2、background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域，语法：

background-clip ： border-box || padding-box || content-box

属性值：

（1）border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；

（2）padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；

（3）context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；

3、background-origin是用来决定图片的原始起始位置的，功能类似于background-position，语法：

background-origin: padding-box|border-box|content-box;

属性值：

（1）padding-box：背景图像填充框的相对位置

（2）border-box ：背景图像边界框的相对位置

（3）content-box ：背景图像的相对位置的内容框

希望可以帮到你！

收起回答

weixin_慕粉5325704 提问者 #1

background-origin是否控制背景颜色的起始位置

2019-06-26 08:48:28
卡布琦诺回复提问者 weixin_慕粉5325704 #2

background-origin属性是用来控制背景图片的，不能控制背景颜色的起始位置哦。祝学习愉快！

2019-06-26 11:34:00