css3之background-origin和background-clip的区别与联系_background-clip 和 background-origin

作者：羊村懒王 | 2024-05-18 22:55:08

踩

background-clip 和 background-origin

background-origin（CSS3新属性）

规定 background-position 属性相对于什么位置来定位

有三个属性值：

border-box（忽略border，即会覆盖border的位置）
padding-box（忽略padding，即会覆盖padding的位置，不会覆盖border）
content-box（只显示在content中，不会覆盖border和padding）

下面用图示例


<span style="font-size:14px;">div{
            width: 100px;
            height: 100px;
            border: 5px dashed blue;
            padding: 10px;
            margin: 100px auto;;
            background: url("../bg.png") no-repeat;
            background-origin: content-box;
        }</span>

(background-origin如果写在css中只有Opera浏览器可以识别，如果希望在火狐或者chrome或 Safari中使用，要使用它们浏览器的私有属性-moz-background-origin(Firefox),-webkit-background-origin(chrome,safari)，并且对应的值是content,padding,border,省略了-box

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。

background-clip（CSS3新属性）

规定背景的绘制区域，即裁剪，通常和background-origin一起使用

也有三个属性值：

border-box（忽略border，即会覆盖border的位置）
padding-box（忽略padding，即会覆盖padding的位置，不会覆盖border）
content-box（只显示在content中，不会覆盖border和padding）

下面用图示例


background-origin: border-box;
background-clip: content-box;

浏览器支持：IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

此外，还有一个小实践：点击打开链接

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】