背景图片
设置背景图片只需设置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,图片会缩放以保证覆盖元素的每一个像素,同时不会变形。