背景颜色

背景颜色默认为透明(transparent)

背景颜色可以输入预定义值、十六进制值 和 RGB代码

background-color: pink;

---

背景色透明

background-color: rgba(151, 142, 142, 0.3);

1. 最后一个参数是alpha透明度，取值范围在 0 ~ 1 之间
2. alpha透明度的值可以不用写 0，0.3 可以写成 .3
3. 只是背景色变透明而已，但是内容不会受到影响
4. 该属性是css3新属性，只有 IE9+ 版本的浏览器支持

图片

场景：小图片或者超大图片

属性：

• none ：没有背景图片（默认）
• url ：图片路径

background-image: url("图片路径");

---

背景图片平铺：

属性：

• repeat ：平铺（默认）
• no-repeat ： 不平铺
• repeat-x ：横着平铺
• repeat-y ：竖着平铺

background-repeat: no-repeat;

---

背景图片位置：

x 和 y 分别表示的是x轴和y轴的具体数字或者具体方位

background-position: x y;

方位：y（top ，bottom ），x（ right ， left）， xy（center）

一般情况下：我喜欢 x轴用左右中，y轴用上下中

如果你只写一个方位词，那么另一个方位则默认居中

/*这两个写法的都可以，并且效果是一样的*/
/* 如果只输入一个值，那么该值就是x的值，y值默认为居中 */
background-position: left top;
background-position: top left;

x和 y 可以输入具体的值，也就是精确定位（第一个值是x值，第二个是y值）

/* 如果只输入一个值，那么该值就是x的值，y值默认为居中 */
background-position: 150px;
background-position: 150px 200px;

混合定位（方位名词和具体数值一起使用，注：第一个值是x值，第二个是y值）

background-position: 150px center;

• 向左移动为负值，向右移动为正值
• 向上移动为正值，向下移动为负值

---

固定背景图片

background-attachment: fixed;

参数	作用
scroll	背景图片随内容对象滚动
fixed	背景图片固定，不随内容对象滚动

---

背景图片复合属性（实际开发中提倡这种写法）

没有特定的书写顺序，但一般是按照下面这个顺序书写的

background: 背景颜色 背景图片url 背景平铺 背景图片滚动 背景图片位置(是否居中);
background: #ff0 url("向上.png") no-repeat scroll center top;

---