CSS3中background-clip和background-origin的区别示例介绍
程序员文章站
2023-09-19 19:20:33
本文为大家介绍下CSS3中background-clip和background-origin的区别,感兴趣的朋友可以参考下... 14-03-10...
相信除了我以外,还有不少童鞋在学习到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决定的是背景从哪个区域开始绘制。
想搞清楚它们的区别还不简单?且看下面的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决定的是背景从哪个区域开始绘制。
推荐阅读
-
js中apply和Math.max()函数的问题及区别介绍
-
css3的transition效果和transfor效果示例介绍
-
php中 的区别示例介绍
-
CSS3 Flexbox中flex-shrink属性的用法示例介绍
-
CSS3中:nth-child和:nth-of-type的区别深入理解
-
Angular.js中ng-if、ng-show和ng-hide的区别介绍
-
CSS3中background-clip和background-origin的区别示例介绍
-
jQuery学习之prop和attr的区别示例介绍
-
Oracle中的Connect/session和process的区别及关系介绍
-
在css3中background-clip属性与background-origin属性的用法介绍