【前端学习记录】【CSS】

background-size：

设置背景图片大小。图片可以保持其原有尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到可用空间的尺寸。

单张图片的背景大小可以使用三种方法中的一种来规定：

• contain

缩放背景图片以完全装入背景区，可能背景区域部分空白。contain，如果背景图比容器大，会尽可能缩放背景并保持图像的宽高比，直至填充所在容器。如果背景图太小了，容器的空白区域会显示background-color设置的背景颜色。

• cover

缩放背景图片以完全覆盖背景区域，可能背景图片部分看不见。与contain相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图部分会被裁剪。

• 设置宽度和高度
• auto

以背景图片的比例缩放。

background-repeat：

CSS属性定义背景图像的重复方式。

单值语法：

background: repeat-x/repeat-y/repeat/space/round/no-repeat;

双值语法：水平 垂直

background-repeat: repeat space

background-position:

单值语法：

关键字center，用于居中背景图片

关键字top，left，bottom，right，用于指定背景放在哪个边界，另一个维度设置成50%

双值语法：

一个定义x坐标，另一个是y坐标，且不能重复top、left等。

三值语法：

前两个是关键字值，第三个是偏移量。

四值语法：

第一三十定义x和y的关键字值，第二四十x和y的偏移量。