css3之background-clip与background-origin的区别
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 | 3 |
background-origin与background-clip的区别:
- background-origin:eg:如果是 padding 值,则 position 相对于 padding 边缘("0 0" 为 padding 边缘的左上角,而 "100% 100%" 为右下角)。
- background-clip:
不同浏览器下:
background-clip:
- background-clip:border-box;
ie7:ie8:chrome:firefox:
因为ie9+才支持此属性所以ie7\ie8无论background-clip:border-box/padding-box/content-box;都是这种样子
- background-clip:padding-box/content-box在chrome、firefox、ie9及以上浏览器都呈现效果统一,所以不再截图
background-origin:
- border-box:在chrome、firefox、ie9及以上浏览器呈现效果统一
- padding-box:
- content-box:
background-origin与background-clip一起用时
-
background-clip:content-box;
background-origin:padding-box; - 只写background-origin:padding-box;时
background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。
注:如若喜欢,欢迎转载,请在文章页面明显位置给出此文链接!
若您觉得这篇文章还不错请点击下右下角的推荐,有了您的支持才能激发作者更大的写作热情,非常感谢!
如若喜欢,欢迎转载,请在文章页面明显位置给出此文链接!
若您觉得这篇文章还不错请点击下右下角的推荐,有了您的支持才能激发作者更大的写作热情,非常感谢!