规定背景的绘制区域

浏览器支持

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的更多相关文章

  1. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  2. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  3. CSS3详解:background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  4. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  5. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  6. 第5章 css与背景相关的样式background

    background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...

  7. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  8. 例子:Background Audio Streamer Sample

    The Background Audio Streamer sample demonstrates how to create an app that uses a MediaStreamSource ...

  9. #8.12.16总结#background transition、animation、transform

    background-origin 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat此属性才会生效. background-origin :bord ...

  10. 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 ...

随机推荐

  1. 算法笔记字符串处理问题H:编排字符串(2064)

    题目描述 请输入字符串,最多输入4 个字符串,要求后输入的字符串排在前面,例如 输入:EricZ 输出:1=EricZ 输入:David 输出:1=David 2=EricZ 输入:Peter 输出: ...

  2. rdb转为rdf

    dump-rdf -f N-TRIPLE -b http://localhost:2020/  -o iswc.nt terrsearch.ttl

  3. 基于R-Tree的最近邻查询

    转自基于R-Tree的最近邻查询 BAB(Branch.and.Band)算法是由Nick Roussopoulousnl等人于1995年提出的,是最早的基于R.树的静态最近邻查询算法.该算法使用MI ...

  4. ASP.NETCore使用AutoFac依赖注入

    原文:ASP.NETCore使用AutoFac依赖注入 实现代码 1.新建接口类:IRepository.cs,规范各个操作类的都有那些方法,方便管理. using System; using Sys ...

  5. springcloud 学习笔记

    ---恢复内容开始--- 1. pom配置 1.1 引入spring boot 依赖 <parent> <groupId>org.springframework.boot< ...

  6. 关于Memcached的CAS和Set方法造成Socket泄漏的问题

    为了解决多并发下写Memcached的冲突方案,我们项目组引入了CAS机制.类同于Java并发包中的CAS(Compareand set)原子操作,用来处理同一个Item被多个线程更改的并发问题.Me ...

  7. v-if v-else-if v-else

    1.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  8. Android自己定义View基础篇(三)之SwitchButton开关

    自己定义View基础篇(二) 自己定义View基础篇(一) 自己定义View原理 我在解说之前,先来看看效果图,有图有真相:(转换gif图片效果太差) 那来看看真实图片: 假设你要更改样式,请改动例如 ...

  9. Effective C++ 条款三 尽可能使用const

    参考资料:http://blog.csdn.net/bizhu12/article/details/6672723      const的常用用法小结 1.用于定义常量变量,这样这个变量在后面就不可以 ...

  10. ExtJs学习笔记(1)---ExtJs安装及其使用

    从官网下载了ExtJs的3.2版本号的SDK,包括了代码依赖的具体说明.文档.范例和其它文件.当中,adapter和resources文件是Ext正常执行所必须的,其它的仅在开发过程中使用到. Ada ...