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; }
效果图
background-clip与background-origin的更多相关文章
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- compass模块
Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- 第5章 css与背景相关的样式background
background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
- 例子:Background Audio Streamer Sample
The Background Audio Streamer sample demonstrates how to create an app that uses a MediaStreamSource ...
- #8.12.16总结#background transition、animation、transform
background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...
- How to tile small texture image onto page as its background
You don’t need to set a big size image as the background of pages if the image is texture or uniform ...
随机推荐
- 算法笔记字符串处理问题H:编排字符串(2064)
题目描述 请输入字符串,最多输入4 个字符串,要求后输入的字符串排在前面,例如 输入:EricZ 输出:1=EricZ 输入:David 输出:1=David 2=EricZ 输入:Peter 输出: ...
- rdb转为rdf
dump-rdf -f N-TRIPLE -b http://localhost:2020/ -o iswc.nt terrsearch.ttl
- 基于R-Tree的最近邻查询
转自基于R-Tree的最近邻查询 BAB(Branch.and.Band)算法是由Nick Roussopoulousnl等人于1995年提出的,是最早的基于R.树的静态最近邻查询算法.该算法使用MI ...
- ASP.NETCore使用AutoFac依赖注入
原文:ASP.NETCore使用AutoFac依赖注入 实现代码 1.新建接口类:IRepository.cs,规范各个操作类的都有那些方法,方便管理. using System; using Sys ...
- springcloud 学习笔记
---恢复内容开始--- 1. pom配置 1.1 引入spring boot 依赖 <parent> <groupId>org.springframework.boot< ...
- 关于Memcached的CAS和Set方法造成Socket泄漏的问题
为了解决多并发下写Memcached的冲突方案,我们项目组引入了CAS机制.类同于Java并发包中的CAS(Compareand set)原子操作,用来处理同一个Item被多个线程更改的并发问题.Me ...
- v-if v-else-if v-else
1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- Android自己定义View基础篇(三)之SwitchButton开关
自己定义View基础篇(二) 自己定义View基础篇(一) 自己定义View原理 我在解说之前,先来看看效果图,有图有真相:(转换gif图片效果太差) 那来看看真实图片: 假设你要更改样式,请改动例如 ...
- Effective C++ 条款三 尽可能使用const
参考资料:http://blog.csdn.net/bizhu12/article/details/6672723 const的常用用法小结 1.用于定义常量变量,这样这个变量在后面就不可以 ...
- ExtJs学习笔记(1)---ExtJs安装及其使用
从官网下载了ExtJs的3.2版本号的SDK,包括了代码依赖的具体说明.文档.范例和其它文件.当中,adapter和resources文件是Ext正常执行所必须的,其它的仅在开发过程中使用到. Ada ...