background家族详解

background家族详解

CSS2中background家族连写形式

background: background-color, background-image, background-repeat, background-attachment, background-position；

一、设置背景色： background-color

background-color: transparent || color;

主要用来设置元素的背景颜色，默认是transparent（不设置任何颜色时是透明色）可以采用css支持的一切颜色值。

二、设置背景图片：background-image

background-image: none || url

主要用来设置元素的背景图片，默认为none。url可以是绝对地址，也可以是相对地址。

三、设置背景图片重复：background-repeat

background-repeat: repeat || repeat-x || repeat-y || no-repeat;

主要用来设置background-image在元素中的铺放形式。默认是repeat–平铺。

四、设置背景图像是否固定或者随着页面而滚动，background-attachment

background-attachment: scroll || fixed;

主要是用来设置背景图像是否固定或者随着页面的其余部分滚动，其默认值为scroll。

五、设置背景图片的位置，background-position：主要用于设置背景图片的起始位置。

CSS3中新增的背景属性

一、background-size:主要用于设置背景图片的尺寸。
语法：

background-size: auto || length || percentage || cover || contain;

取值说明：
auto: 默认值，保持背景图片的原始高度和宽度；
length: 具体的值；
percentage: 应用于块级元素，相对于待设置背景图片的元素本身，而不是背景图片。
cover: 放大图片，以适合铺满整个容器。用于当图片小于容器时，又无法使用background-repeat来实现时。
contain: 缩小背景图片，以适应铺满整个容器。

注意点： 当background-size取值为length和percentage时可以设置两个值，当只取一个值时，第二个值与第一个值相等。

二、background-clip:主要用来确定背景的剪裁区域，就是如何控制元素背景显示局域，
语法：

background-clip: border-box || padding-box || content-box;

默认值是border-box;
取值说明
超过属性值的部分将被剪裁

注意点：bockground-color是从元素的边框左上角起到右下角止，而background-image是从padding边缘的左上角起到border的右下角止。

这也是background-clip出现的意义。为了让背景颜色和背景图片统一在一个位置显示。

background-clip在webkit内核下的神奇效果。—图片填充文本。
主要代码：

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

三、background-origin:主要用来决定背景图片的定位原点，也就是背景图片定位的起点。

再次强调一个重点：

元素background中background-color原点位置是在border的外边缘处，而background-image的原点是在元素的border内边缘处。
这是默认情况下背景图像原点位置。
现在看来可以通过background-origin来改变背景图片的position位置。
语法：

background-origin: padding-box || border-box || content-box;

取值说明：
padding-box：默认值；决定background-position起始位置是从padding的外边缘开始显示背景图片。
border-box：是从border的外边缘。
content-box：是从content的外边缘。

效果展示

背景图片起点移到了border的外边缘，其实background-position并没有改变，依旧是left top；但是background-origin把background-position的原点位置改变了，从当初的padding外边缘移动到了border的外边缘。
当background-origin属性没出现时，如何达到这样的效果？
用background-position模拟这样的效果。

background-origin: border-box;
等于把
background-position: left top;
变成了
background-position : -(左边框宽度） -（顶边框宽度）

取值为content-box时同理

上面介绍了background-origin在取不同值时对background-position的影响，但大家发现了没有，上面实例都是在background-attachment:scroll下。但是如果将background-attachment设置为fixed时，background-origin将不起任何作用。并且background-origin取任何值都不会影响body中background-image的任何设置。

本文总结：
background-clip主要是用来控制背景（背景色和背景图片）的显示区域，其主要配合background-origin来制作不同的效果；而background-origin主要是用来控制背景图片的background-position位置，并且其只能控制背景图片。

参考资料：
https://www.w3cplus.com/content/css3-background-size
https://www.w3cplus.com/content/css3-background-clip
https://www.w3cplus.com/content/css-background-origin