background-origin和background-clip的理解

Posted Nnn_Lillian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了background-origin和background-clip的理解相关的知识,希望对你有一定的参考价值。

  第二遍再次学习到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的理解的主要内容,如果未能解决你的问题,请参考以下文章

background-clip和background-origin

关于c3背景图background-origin和backgroud-clip属性的梳理

CSS3:backgroud-size和background-origin的使用方法

background-origin

background-origin:规定 background-position 属性相对于什么位置来定位

background-origin,clip