码迷,mamicode.com
首页 > 其他好文 > 详细

background-origin和background-clip的理解

时间:2016-11-19 12:26:08      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:archive   follow   包括   内容   背景图片   使用   定位   pos   文章   

  第二遍再次学习到css样式的部分,在背景设置部分遇到了问题。最让我困惑的就是background-origin和background-clip这两个属性。    

    官方解释

        background-origin:规定背景图片的定位区域。      

        background-origin:规定背景图片的定位区域。      

        background-clip:规定背景图片的绘制区域。     

        通过官方的定义,我们发现这两个属性它们有相同的可选值,即border、padding、content三种,而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。    

        此时还是让人感到困惑,迷惑他们的使用方法,所以在这里看到了网上的一位大神用一个实例来解释说明他们两个    

    总结:(引用了上述文章中的内容)

    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,则背景在元素的边框、补白和内容区域都会显示;如果值为padding,则背景只会在补白和内容区域显示;如果值为content,则背景只会在内容区域显示。  

background-origin和background-clip的理解

标签:archive   follow   包括   内容   背景图片   使用   定位   pos   文章   

原文地址:http://www.cnblogs.com/nnnlillian/p/6079888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!