盒子
盒子
文章目录
  1. 简介
  2. background-clip VS background-origin
    1. 默认值

background八日谈第六日:background-origin

简介

在上文中我们介绍了background-clip属性,background-origin可是说是它的兄弟属性,也有三个值border-boxpadding-boxcontent-box
所以本文的主要目的就是介绍两者的区别。

background-clip VS background-origin

首先,从两者的定义入手。

background-clip : 设置元素的背景(背景图片或颜色)是否延伸到边框下面
background-origin : 指定背景图片background-image 属性的原点位置的背景相对区域

从定义可以看出,当需要改变背景颜色(图片)的覆盖范围时,需要使用background-clip属性。
当需要改变背景图片(background-image)的起点位置时,需要使用background-orgin属性。

默认值

background-origin的默认值为padding-box
background-clip的默认值为border-box

想要加深对两者理解的可以用下面的例子把玩把玩。

TO BE CONTINUED!

参考文献:
css-tricks
MDN

支持一下
扫一扫,请我喝杯咖啡☕️