background-origin和background-clip的理解

Posted 2020-08-20 Nnn_Lillian

  第二遍再次学习到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，则背景只会在内容区域显示。