前端开发：CSS背景属性

1.背景颜色

background-color: [指定颜色]

background-color:blue；

background-color: transparent        //设置背景是透明的

2.背景图片 

background-image: url(...)

1. url 不要遗漏.

2. url 可以是绝对路径, 也可以是相对路径

3. url 上可以加引号, 也可以不加.

background-image: url(../rose.jpg);        //我放在上级目录下；也可以是网络图片

3.背景平铺 

background-repeat: [平铺方式]   //可以理解为如果背景图片很小；是铺一张还是多张

重要取值:

repeat: 平铺

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺

背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

4.背景位置 

background-position: x y;

1. 方位名词: (top, left, right, bottom)

2. 精确单位: 坐标或者百分比(以左上角为原点)

3. 混合单位: 同时包含方位名词和精确单位

5.背景尺寸 

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

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px

也可以填百分比: 按照父元素的尺寸设置.

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域