当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS3中background-clip和background-origin的区别示例介绍

CSS3中background-clip和background-origin的区别示例介绍

2019年07月25日  | 移动技术网IT编程  | 我要评论
相信除了我以外，还有不少童鞋在学习到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决定的是背景从哪个区域开始绘制。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网