背景属性

96 阅读1分钟

1. 背景颜色

background-color: transparent;
transparent:默认值,透明的

2. 背景图片

background-image: url("");

3. 背景图片是否平铺

background-repeat: ;
repeat: 默认值 平铺(水平和垂直)
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

4. 背景图片的大小

background-size: x y;
取值:px % cover contain
cover 整个背景区域覆盖完全,背景图片可以显示不完全
contain 背景图片拉伸至最大,但是背景区域可能覆盖不完全
当只取一个值,背景图片等比例缩放

5. 背景图片定位

background-position: x y;
取值px % left right top bottom center 
默认值在0 0(左上角)
当只取一个值,第二个值默认居中
取正值往右下走,取负值,往左上走

6. 背景图片固定

background-attachment:;
scroll:跟着页面滚动
fixed:固定

7. 简写

background:颜色 图片 平铺 大小 定位 固定 ;
没有取值的属性,为默认值
当单个属性和简写属性同时存在,推荐简写属性写在单个属性的前面

8.背景模糊属性

背景滤镜 backdrop-filter