CSS-Learning | background-image属性如何设置背景图片以及相关背景图片语法

背景图片

设置背景图片只需设置background-image属性，接受url()函数式表示法，可以使用相对路径，如url(img/cat.jpg)。浏览器此时会在保存当前样式表的目录的img子目标中寻找图片。
如果路径以一个斜杠开头，如/img/cat.jpg，则浏览器会在相对于CSS文件所在域的顶级目录的img子目录中寻找图片。

这里也可以使用绝对路径，把协议、域名、路径和文件名都写全。

除了相对路径和绝对路径，加载图片也可以不指向文件，而是在样式表中直接嵌入数据，即数据URI。

由于只把图片设为背景图片，不能达到我们的预期，可以通过相关属性来优化。

背景图片语法

background-repeat属性

默认值为repeat，意思是背景图片要沿x轴和y轴重复；
声明repeat-x或repeat-y来限定图片只沿某个轴的方向重复；
no-repeat完全禁止重复；

支持以空格分隔的针对两个方向的关键字声明语法；
space关键字，如果（未经剪裁和缩放的）背景图片可以在元素内部完全重复两次以上，那么它就会重复相应的次数，重复的图片之间填充空白，从而让第一张和最后一张图片都紧挨着元素的边缘；
round关键字，意味着图片会被缩放，从而切好能在元素中重复整数次。

background-position属性

既可以使用关键字，也可以使用像素、em或百分比。最简单的情况下，可以只给两个值：一个表示相对于左侧的偏移量，一个表示相对于顶部的偏移量。

如果使用像素或em单位来设置背景图片的位置，那么图片的左上角会相对于元素的左上角定位，也就是会偏移指定的数值。

如果设置背景图片的位置时使用了百分比，那么不会定位背景图片的左上角，而是定位图片中对应的点。

使用关键字来对齐背景图片，要在x轴上用left、center或right，在y轴上用top、center或bottom。
新语法允许添加外边空声明，先写边界关键字，再写长度值。

background-clip属性

默认值是border-box， 背景被裁剪到边框盒。
padding-box就可以把图片剪裁到内边距盒子以内。
content-box会把图片位于内边距及其之外的部分裁剪掉。

背景定位默认的原点仍然在代码中声明的内边距盒子的左上角。即定位值从元素边框内开始计算。但是，我们可以使用background-origin属性控制原点的位置。

background-origin属性

border-box：背景图像相对于边框盒来定位；
padding-box：背景图像相对于内边距框来定位；
content-box：背景图像相对于内容框来定位。

background-attachment属性

默认值scroll，会让背景图片相对于元素本身固定；
fixed，当页面的其余部分滚动时，背景图像不会移动。
local，会让背景图片相对于元素中的内容固定。

background-size属性

给定明确的值，可以重新设置图片的大小，也可以使用百分比让图片随元素缩放而缩放。

关键字contain，这个值可以让浏览器尽可能保持图片最大化，同时不改变图片的宽高比。
关键字cover，图片会缩放以保证覆盖元素的每一个像素，同时不会变形。