background-clip与background-origin两者的区别

时间:2023-03-09 04:03:16
background-clip与background-origin两者的区别
第一篇随笔有提到 background-clip与background-origin两者的区别,但是太字面化了,对于小白而言甚是难以理解,包括我自己,在第二次去理解的时候,反而蒙圈了。所以,查阅了一些资料,用自己的理解,简单点,简单点,简单点。。。
background-clip指定了背景可以覆盖到什么范围,包括覆盖到了那个位置上(例如:设置background-origin :border,则实际的效果是从border开始,并覆盖了border)。 
background-origin指定了背景从什么位置开始,不包括那个位置(例如:设置background-origin :border,则实际的效果是从padding开始,并不覆盖border)。
background-clip会比较有用,毕竟显示背景一般都希望在内容区显示,这样就可以设置padding而不用担心背景会出现在padding区域。
background-origin 设置padding,背景会出现在padding区域。