CSS3中background-clip和background-origin的区别

来源：互联网发布：传输层tcp端口号编辑：程序博客网时间：2024/04/25 13:52

相信除了我以外，还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑，这俩哥们儿到底啥区别。

想搞清楚它们的区别还不简单？且看下面的DEMO：

.test {  background-image: url(pic.jpg);  background-clip: border-box;  background-origin: border-box;  border: 20px dashed black;}

.test {  background-image: url(pic.jpg);  background-clip: border-box;  background-origin: padding-box;  border: 20px dashed black;}

.test {  background-image: url(pic.jpg);  background-clip: padding-box;  background-origin: border-box;  border: 20px dashed black;}

由于鄙人比较懒，就不放效果图了，有兴趣的童鞋可以自己去试试，这里可以看出，实际上background-clip决定的是背景从哪个区域开始显示，而background-origin决定的是背景从哪个区域开始绘制。

0 0