CSS新手入门笔记整理：CSS背景样式

背景颜色：background-color

语法

background-color:颜色值;

颜色值有两种

• 一种是“关键字”，指的是颜色的英文名称，如red、green、blue等。参考CSS 颜色名称。
• 另外一种是“十六进制RGB值”，类似“#FBE9D0”形式的值。参考十六进制RGB值。

---

背景图片样式：background-image

语法

background-image:url（图片路径）;

• 引入图片需要一个元素标签充当“容器”。
• 容器需要有“宽度”与“高度”。
• 背景图片与图片是不一样的，背景图片是使用CSS来实现，而图片是使用HTML来实现。两者的使用场合也不一样，大多数情况下都是使用图片，不过在某些无法使用图片的场合中，我们就要考虑背景图片形式。
• 此外还有一点要说明一下：下面这两种引入背景图片的方式都是正确的，一个给路径加上了引号，另外一个没加引号。不过在实际开发中，建议采用不加引号的方式，因为这种方式更加简洁。

/*方式1：路径加上引号*/
background-image: url（"img/haizei.png"）;
/*方式2：路径没加引号*/
background-image: url（img/haizei.png）;

---

背景图片平铺方式：background-repeat

语法

background-repeat:取值;

属性值	说明
repeat	在水平方向和垂直方向上同时平铺(默认值）
repeat-x	只在水平方向(x轴)上平铺
repeat-y	只在垂直方向(y轴)上平铺
no-repeat	不平铺

---

背景图片位置：background-position

语法

background-position:像素值/关键字;

---

像素值

语法

background-position:像素值;

• 水平距离和垂直距离这两个数值之间要用空格隔开，两者取值都是像素值。
• background-position属性设置的两个值是相对该元素的左上角来说的。

---

关键字

语法

background-position:关键字;

属性值	说明
top left	左上
top center	靠上居中
top right	右上
left center	靠左居中
center center	正中
right center	靠右居中
bottom left	左下
bottom center	靠下居中
bottom right	右下

---

背景图片固定方式：background-attachment

语法

background-attachment:取值;

属性值	说明
scroll	随元素一起滚动(默认值)
fixed	固定不动

---