CSS: background-clip与background-origin_4.简述css3中background clip和background- origin的含义请简述

作者：羊村懒王 | 2024-05-18 22:50:56

踩

4.简述css3中background clip和background- origin的含义请简述各属性值的含

今天在设置背景图片的时候遇到一个需求：背景颜色要铺满整个方框（content + padding），但是背景图片只能从content 部分开始，在实现的过程中了解到了css3的两个属性 background-clip与background-origin，在这里记录一下。

（一）首先了解一下 background 属性：这个属性其实是很多个属性的简写，大致包括以下几种：

其中只有 background-origin、background-clip、background-attachment 这三个属性比较少用到；

background-position属性指定了背景的位置，比如background-position:0px 0px; 那这个0像素是指相对于哪里来说的呢？这里就涉及到一个参照点的问题。

background-origin属性就是指定background-position的参照点是在边框区域的左上角，还是在补白区域的左上角，或是在内容区域的左上角，对应的属性三个值就分别是border-box、padding-box、content-box;

background-clip属性则是用来指定背景的绘制区域，比如说如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content，则背景只会在内容区域显示。

以上就是两者的简单介绍，下面我们将详细说明。

（二）1、background-origin：对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的平移相似)。需要注意，与background-clip不同的是，它只是单纯设置背景图片的边界，并不会对背景颜色造成影响。

下图我们用来测试的div内部结构，黄色为背景色，小机器人为背景图片。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <style type="text/css">
        body {
            background-color: #fff;
        }
        .testDemo {
            box-sizing: border-box;
            display: inline-block;
            margin: 10px;
            width: 280px;
            height: 280px;
            padding: 50px;
            border: 30px dotted #000;
            background-image: url("../images/error-robot.png");
            background-color: yellow;
            background-repeat: no-repeat;
        }
        .testDemo01 {
            background-origin: border-box;
        }
        .testDemo02 {
            background-origin: padding-box;
        }
        .testDemo03 {       
            background-origin: content-box;
        }
    </style>
</head>
<body>
    <div class="testDemo testDemo01">
     
    </div>
    <div class="testDemo testDemo02">
     
    </div>
    <div class="testDemo testDemo03">
     
    </div>
</body>
</html>

测试效果图如下，通过此图也能够发现，无论background-origin的属性值怎么改变，背景颜色永远都是铺满整个div的。：

2、对于background-clip, 其关键字是指将背景图片以border的尺寸、以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试页</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <style type="text/css">
        body {
            background-color: #fff;
        }
        .testDemo {
            box-sizing: border-box;
            display: inline-block;
            margin: 10px;
            width: 280px;
            height: 280px;
            padding: 50px;
            border: 30px dotted #000;
            background-image: url("../images/error-robot.png");
            background-color: yellow;
            background-repeat: no-repeat;
        }
        .testDemo01 {
            background-clip: border-box;
            background-origin: border-box;
        }
        .testDemo02 {
            background-clip: padding-box;
            background-origin: border-box;
        }
        .testDemo03 {       
            background-clip: content-box;
            background-origin: border-box;
        }
    </style>
</head>
<body>
    <div class="testDemo testDemo01">
     
    </div>
    <div class="testDemo testDemo02">
     
    </div>
    <div class="testDemo testDemo03">
     
    </div>
</body>
</html>

代码运行的效果图如下：

（三）总结：

1、background-origin属性：仅针对背景图片，不针对背景色；其本质是设置背景图片的位置坐标轴原点，通过改变原点，来实现背景图片针对整个容器（边框+补白+内容）或者是局部容器（补白+内容/ 内容）的定位，类似于图片平移；

2、background-clip属性：不止对背景图片有效，对背景色同样有效；其本质是对容器背景的切割，是整个容器显示（背景色+背景图）或者局部显示（背景色+背景图），类似于截图；

3、盒子模型的3D构图：注意背景图与背景色的层级关系，背景图在背景色之上显示，因此不透明的图片会遮盖背景颜色。

（四）附上参考过的博文链接：

http://blog.csdn.net/linwh8/article/details/52636340

http://www.cnblogs.com/shytong/p/5077129.html

http://www.cnblogs.com/2050/archive/2012/11/13/2768289.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/590252

CSS: background-clip与background-origin_4.简述css3中background clip和background- origin的含义 请简述

CSS: background-clip与background-origin_4.简述css3中background clip和background- origin的含义请简述