点击上方蓝字关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
说到background,所有搞前端的人都非常非常熟悉,因为我们天天都要用到它呀, 眯着眼睛,我们也能背下那个几个常用的属性取值,如下:
background-color
background-image
background-repeat
background-attachment
background-position
background-size
在css3中有两个属性加了进来。它们是
background-clip
background-origin
对于这两个属性的使用,我来简单总结一下:
一、backgroundClip
它有三个取值,如上图分别是border-box|padding-box|content-box。
它们的作用就是背景分别被裁边框,边距,内容框。看个DEMO
从上到下分别是content-box,padding-box,border-box。这样就很清楚了。
二、backgroundOrigin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
通一个demo来更清楚的了解和记住它的作用
从上到下分别是border-box,content-box,padding-box。
总结一下:
1、background可以简写:
[background-color]
[background-image]
[background-repeat]
[background-attachment]
[background-position] /
[ background-size]
[background-origin]
[background-clip]
2、注意一下两个属性的兼容性:
两个情况一样,都还是比较好的。