手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >CSS3中background-clip和background-origin的区别示例介绍
CSS3中background-clip和background-origin的区别示例介绍
摘要:相信除了我以外,还有不少童鞋在学习到background-clip和background-origin的时候都很疑惑,这俩哥们儿到底啥区别。...

相信除了我以外,还有不少童鞋在学习到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决定的是背景从哪个区域开始绘制。

【CSS3中background-clip和background-origin的区别示例介绍】相关文章:

表单中Readonly和Disabled的区别详解

CSS3对background的调整和增加的属性

background和background-Color的区别介绍

CSS中Font的一些基本知识点归纳总结

边框(border)边距(margin)和间隙(padding)属性的区别

CSS写的简单表格示例

div中class与id的区别及应用

CSS导航布局中当前页面的具体实现demo示例

CSS中em和px的区别

css中background-size属性使用介绍

精品推荐
分类导航