background-clip与background-origin

规定背景的绘制区域

浏览器支持

IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。

有三个值：

border-box 背景被裁剪到边框盒。　　

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框

demo：

.clip{width:400px;margin: 50px auto;background-color: red;padding: 20px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}

border-box

padding-box

content-box

其实background-clip的真正作用是决定背景在哪些区域显示。如果它的值为border,则背景在元素的边框、补白和内容区域都会显示；如果值为padding,则背景只会在补白和内容区域显示；如果值为content，则背景只会在内容区域显示。

那为毛前面的background-clip:border不起作用？这就得说说background-origin了

background-origin是指背景显示的区域，或者说背景是从哪个区域开始绘制的(边框、补白或内容区域)。

还不理解的话那就这么来说吧，background-position总该知道吧？它指定了背景的位置，比如background-position:0px 0px ；那这个0像素是指相对于哪里来说的呢？这就涉及到一个参照点的问题了。background-origin的作用就是指定background-position的参照点是在边框区域的左上角，还是在补白区域的左上角，或是在内容区域的左上角，对应的三个值就分别是border、padding、content. background-position的也可以是left、right等方向词语，这时候就不能说参照点了，而应该说参照面，如果值为background-origin的值为border,则参照面包括边框区域、补白区域、内容区域三个部分，如果值为padding,则参照面只包括补白区域和内容区域，如果值为content,则不用我讲了吧。

这个时候再来看看前面那个问题就豁然开朗了，你把background-clip设为border,这时候边框里是能显示背景的，但问题是背景并不是从边框的左上角开始绘制的，它是从补白区域才开始绘制的，女神背景压根就没想要搭理屌丝边框，你屌丝摆出一个怀抱来迎接女神又有个屁用啊，赶紧细软跑吧。background-origin的默认值是padding,也就是默认从补白区域开始绘制背景。

demo:当背景是图片是background-origin：border-box。与background-clip：border-box。显示时有区别，如果都是背景颜色，没有区别，background-origin控制的是背景图片显示的区域，不会影响背景颜色

demo：

.clip{width:400px;margin: 50px auto;background-image: url("images/1.jpg");background-repeat: no-repeat;background-position: left top;background-color: red;overflow: hidden;padding: 20px;height:200px;color: #ddd;line-height:25px;text-align: center;border: 10px dashed blue;}.clip-content{background-clip:content-box;}.clip-border{background-clip:border-box;}.clip-padding{background-clip:padding-box;}.origin-content{-webkit-background-origin: content-box;background-origin: content-box;}.origin-border{-webkit-background-origin: border-box;background-origin: border-box;}.origin-padding{-webkit-background-origin: padding-box;background-origin: padding-box;}

发现一个小问题：

当设置背景backgroud-position：center center时，background-origin不起作用，background-clip：border-box可以让背景颜色绘制在边框上（不太明白，希望懂得人可以指教）

修改上面的代码：

 .clip{background-position: center center;}

　　效果图

转载于:https://www.cnblogs.com/xiaofenguo/p/6074863.html

background-clip与background-origin相关推荐

css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
iOS 后台运行 Background Task与Background Mode
1. background Task的使用 1) Background Task仅用于执行短时间的任务,APP切换到后台后,可以通过beginBackgroundTaskWithExpirationH ...
html5中background什么意思,background
background (计算机专业术语) 语音编辑锁定讨论上传视频本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! background 简写属性在一个声明中设置所有 ...
android background大全,Background安卓版-Background壁纸预约 _5577安卓网
Background是一款全新的手机壁纸应用,软件运行在安卓平台,软件包含了丰富的高质量的手机壁纸应用,是少数派推荐的适合安卓手机的壁纸应用,那么想让自己手机更酷炫的用户使用体验吧! 温馨提示应用还 ...
html里background颜色属性,background属性值
js怎么获取css样式里的background属性值呢? ss文件中如何得到某个属性值: 一.getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值, 返回的是一个CSS样式 ...
css的background
背景属性--background是css中的核心属性.你应该对它有充分的了解.这篇文章详细讨论了background的所有相关属性,甚至包括background-p_w_upload,还为我们介绍了它 ...
CSS3详解：background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个 ...
CSS3之background的调整和增加的属性
对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片在css3里面,你可以再一个标签元素里应用多个背景图片 ...
CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
css 通过background将两张图合成一张图显示
需求背景: 后台返回两张图,一张是默认背景图bgimg,另一张是显示在背景上的图案img. 在列表中,bgimg一般不变,但img会根据不同的花的类型返回不同的图片. 需求是将两张图片叠在一起,让人以 ...

background-clip与background-origin

浏览器支持

background-clip与background-origin相关推荐

最新文章

热门文章