13、css背景

背景颜色 background-color

作用：设置背景颜色

取值：color一样

背景图片 background-image

作用：设置背景图片

注意：1图片的地址必须放在url（）中，图片可以是本地的，也可以是网络的

2如果图片的大小 没有标签【容器】的大 那么会自动水平垂直平铺

3如果同一个标签设置了颜色又设置了背景图片，那么图片会覆盖颜色

4如果网页中存在图片，那么浏览器会再次发送请求 来请求获取图片

背景属性：

background-repeat

作用：设置背景图片的平铺方式

取值：repeat 默认值 在垂直水平方向平铺

no-repeat 在垂直水平方向不平铺

repeat-x 在水平方向平铺

repeat-y 在垂直方向平铺

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

background-position

作用：设置背景图片的开始平铺位置

格式：background-position：水平方向 垂直方向

取值：1.具体方向

水平方向 left center right

垂直方向 top center bottom

2.具体像素

如 10px 10px

应用场景：让页面信息突出，提高用户体验

背景图片的关联方式

什么是背景的关联方式？

默认情况下 背景图片会随着滚动条的滚动而滚动 如果不想让景图片随着滚动条的滚动而滚动

我们可以修改其属性

background-attachment:

取值： scroll默认 不关联

fixed 关联的

background的简写

格式：background:背景颜色 背景图片 平铺方式 关联方式 定位方式

注意：任何一个属性都可以省略

我们一般写：background:背景图片 平铺方式 定位方式

背景图片与插入图片的区别

1.背景图片仅仅是个装饰，不会占用位置

插入图片会占位置

2.背景图片有定位属性，所以可以方便的控制图片的位置

插入图片没有定位属性 控制其位置不方便

3.在不给宽高的情况下 给一个容器添加背景图片不会显示

插入图片会显示，且容器高为图片高

4.插入图片的语义比背景图片强，所以在企业开发中，你的图片想要被 搜索 引擎收录，那么你的图片推荐使用插入图片

精灵图【是一种图像的合成技术】

作用：减少请求次数，降低服务器的处理压力

如何使用；配合背景图片的定位来使用