CSS: background-clip与background-origin

来源：互联网发布：知秋取名意思是什么编辑：程序博客网时间：2024/04/29 08:38

今天在设置背景图片的时候遇到一个需求：背景颜色要铺满整个方框（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

阅读全文

1 0