CSS背景用法的总结

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

---

背景颜色
背景图片
背景平铺
背景图片位置
背景图像固定
背复合写法
背景色半透明

---

1.背景颜色

background-color 属性定义了元素的背景颜色
语法：
background-color: 颜色值;
一般情况下元素背景颜色为transparent(透明)

---

2.背景图片

background-image 属性定义了元素的背景图片。实际开发常见于logo或一些装饰性对的小图片或者是超大的背景图片，优点是非常便于控制位置。
语法：
background-image: none | url;

参数值	作用
none	无背景图（默认）
url	使用绝对或相对地址指定背景图像

---

3.背景平铺

background-repeat 属性定义了元素的背景平铺
语法：
background-repeat: repeat| no-repeat | repeat-x | repeat-y;

参数值	作用
repeat	在纵向和横向平铺（默认）
no-repeat	不平铺
repeat-x	横向上平铺
repeat-y	纵向上平铺

---

4.背景图片位置

background-position 属性定义了元素的背景图片位置

1.参数是方位名词

• 如果指定的两个值都是方位名词，则两个值前后顺序无关，不如left top 和 top left 效果一样。
  background-color: left top;
• 如果只指定了一个方向名词，另一个值省略，则第二个值默认垂直居中
  background-color: left ;

2.参数是精确单位

• 如果参数值是精确坐标，那第一个一定是x坐标，第二个一定是y坐标
  background-color: x y;
• 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中
  background-color: x;

3.参数是混合单位

• 如果指定的两个值是方位名词和精确单位混合使用，则第一个是x坐标，第二个是y坐标
  background-color: left 40px;

---

5.背景图片固定（背景附着）

background-attachment 属性定义了元素的背景图片是否固定或随着页面的其余部分滚动。
语法：
background-image: scroll | fixed;

参数值	作用
scroll	随对象内容滚动
url	固定

---

6.背景复合写法

语法：
background: 背景颜色 背景图片地址 背景平铺 背景附着 背景图片位置;
如：
background：transparent url(image.jpg) no-repeat fixed top;
开发中更推荐这样写，更为简单。

---

7.背景色半透明

background-rgba 属性定义了元素的背景色半透明效果
语法：
background: rgba(x,y,z,a)
注意：

• 最后一个参数是透明的，取值0~1
• 习惯省略0，如rgba(0,0,0,0.3)写为rgba(0,0,0,.3)
• 背景半透明，对内容不受影响