CSS学习笔记（五）CSS背景

一、背景颜色及背景图片

1、CSS中有一个属性专门用来设置标签的背景颜色：background-color。

2、CSS中有一个属性专门用来设置背景图片：background-image: url()
注意：
（1）图片地址必须放在url()中，图片的地址可以是本地的地址，也可以是网络地址。
（2）如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充。
（3）如果网页上出现了图片，那么浏览器会再次发送请求获取图片。

二、背景平铺

1、背景平铺：background-repeat
取值：

repeat: 默认，在水平和垂直都需要平铺
no-repeat: 在水平和垂直都不需要平铺
repeat-x: 只在水平方向平铺
repeat-y: 只在垂直方向平铺

2、应用场景：可通过背景图片的平铺来降低图片大小，提升网页访问速度。

三、背景定位

1、注意：同一标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。

2、控制背景图片的位置：background-position: 属性
（1）格式：background-position: 水平方向 垂直方向;(快捷键：bp)
（2）取值：
A、位置取值

水平: left/center/right
垂直: top/center/bottom

B、像素取值

background-position: 100px 200px(一定要加单位，集体的像素是可以接受负数的)

四、背景关联和缩写

1、背景属性缩写的格式：

background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
(注：在backgrounf中，任何一个属性都可以被省略)

2、关联方式：默认情况下背景图片会随着滚动条的滚动而滚动；若不想让背景图片随滚动条的滚动而滚动，那么我们九可以修改背景图片和滚动条的关联方式。
（1）格式：background-attachment: scroll；（ba）
（2）取值：

scroll: 默认值，会随着滚动条的滚动而滚动
fixed: 不会随着滚动条的滚动而滚动

五、背景图片和插入图片的区别

1、背景图片仅是一个装饰，不会占用位置；插入图片会占用位置。

2、背景图片有定位属性，所以方便控制图片的位置；插入图片没有定位属性，所以控制图片的位置不方便。

3、插入图片语义比背景图片语义强，所以在企业开发中，图片要想被搜索引擎收录，则推荐使用插入图片。

六、背景图片练习

七、CSS精灵图（fw软件）

1、CSS精灵图；为一种图像合成技术。

2、作用：减少请求次数及降低服务器处理压力。

3、如何使用：需配合背景图片和背景定位来使用。

八、精灵图练习