【CSS3】background-origin和background-clip的区别_html/css_WEB-ITnose
程序员文章站
2022-04-26 16:17:35
...
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。
虽然两者看上去实现的效果差不多,但是他们两个的原理是不同的。background-origin定义的是背景位置(background-position)的起始点;而background-clip是对背景(图片和背景色)的切割。
1.background-origin
我们来看一下例子:
我们来看一下style样式:
.bg{ width: 100px; height: 100px; padding:50px; border: 10px dashed #000000; background: #ffff00 url('pic1.gif') no-repeat; margin-top: 10px; display: inline-block; } .bg_origin_border{ background-origin: border-box; /*background-position: 10px 10px;*/ } .bg_origin_padding{ background-origin: padding-box; /*background-position: 10px 10px;*/ } .bg_origin_content{ background-origin: content-box; /*background-position: 10px 10px;*/ }
下面我们把注释打开,来进一步验证backgroung-origin。
2.backgroung-clip
我们还是直接来看例子:
样式:
.bg_clip_border{ background-clip: border-box; /*background-position: -10px -10px;*/ } .bg_clip_content{ background-clip: content-box; /*background-position: -10px -10px;*/ } .bg_clip_padding{ background-clip: padding-box; /*background-position: -10px -10px;*/ }
我们接着把注释去掉:
这就印证了background-clip只是将背景和背景色粗暴的裁剪。
推荐阅读
-
CSS3中background-clip和background-origin的区别示例介绍
-
css3中的content和实体_html/css_WEB-ITnose
-
http Get和Post的区别_html/css_WEB-ITnose
-
disabled和readonly的区别是什么_html/css_WEB-ITnose
-
css扩展技术:Less和Sass的区别_html/css_WEB-ITnose
-
get和post的区别_html/css_WEB-ITnose
-
disabled和readonly的区别?_html/css_WEB-ITnose
-
CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose
-
彻底弄懂css中单位px和em,rem的区别_html/css_WEB-ITnose
-
用css3和canvas实现的蜂窝动画效果_html/css_WEB-ITnose