1. 简述

在网页中，到处能够看到各种背景（背景颜色、背景图片 等），在页面中，元素是可以通过设置

背景展示

更加丰富的效果，这是构成我们网页多样化的重要部分。

下面我们开始讲解元素背景

2. 背景颜色

2.1 概述及格式

用于设置标签的背景颜色

格式：background-color: 颜色值;

注意，背景颜色的默认值是透明，即为：transparent

颜色设置方式：

2.2 透明度设置-rgba

我们除了可以用三种设置具体的背景颜色外，还可以设置背景颜色的透明度。

格式：background-color: rgba(红,绿,蓝,透明度);

注意：红绿蓝的取值范围为 0~255

透明度的取值范围为：0.0~1.0 。

0 为完全透明，1 为不透明

准备代码：要求将蓝色 div 调整为半透明

示例代码：

展示效果：（蓝色已为半透明） 

3. 背景图片

3.1 背景重复设置

用于设置元素背景图片。

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

例如：某个小狗爪子图片

，作为背景图片引入一个长宽 25 的 DIV 标签中，

因为图片太小，所以为了铺满背景，CSS 采取了重复显示多个的策略。

若需要对背景图片是否重复显示进行调整，有以下几个常见设置

3.2 多背景图片设置

元素的背景图片，可以同时设置多个。

格式：background-image: url(""),url("")

注意：多张图片之间用“逗号”分隔

准备代码： 同时展示两张背景图片

示例代码： background-image : url ( "../img/czxy.png" ), url ( "../img/itcast.png" );

效果图： 同时显示两张背景图片

注意：一般我们仅显示一张背景图片即可，如需显示多张，可以用逗号分隔。

多背景图片一般和 背景图片位置连用，否则容易出现上图效果的图片重叠。

3.3 背景图片位置

简述及格式

在多背景图片中，一般我们会为某张背景图片设置特有位置，防止 出现下图 背景图片重叠。

格式：background-position: 水平位置 垂直位置;

位置参数值：

下面我们来具体说明两种不同的参数值方式。

准备代码

快速定位-方位词

快速定位将元素内部切分成了 9 部分。

例如：

我们需要将背景图片放置到左下角，位置写法： left bottom

我们需要将背景图片放置到正中间，位置写法： center center

我们需要将背景图片放置到右上角，位置写法：right top

示例代码：

效果图：

注意：以上写法中，若需要把元素置于左上：left top

也可以写成 top left，效果相同，但不建议，建议使用“水平 垂直” 写法，方便自己记忆。

精确定位 - 具体数值

我们可以通过设置具体数值，来精确定位。

格式：background-position: 水平位置 垂直位置;

示例，对两张图片进行位置设置： background-image :

url("../img/czxy.png"),url("../img/itcast.png");

精确定位写法：

注意事项

1、 如果多张背景图片仅写 一对位置值，该位置值同时作用多张背景图片

2、 如果仅指定了 一个位置值，另一个位置值默认为 50%/center

3、位置、百分比、像素可以混合书写，但不建议，不利于阅读

3.4 背景图片尺寸调整

背景图片也是可以调整大小的。

格式：background-size: 宽度 高度;

注意：如果要为多张图片同时设置尺寸，可以用逗号分隔（若无逗号分隔，就是为多张图片同时设

置）

3.5 背景附着设置

有时当元素过大，背景图片不够长时， 滚动页面，用户体验会比较差。

我们可以设置背景附着，这样即使浏览器上下滚动，背景也是固定的，让用户感受到层次感。

格式：background-attachment:关键字;

准备代码：

示例：background-attachment: fixed;

效果：

4. 总结

元素的背景可以进行多方面设置。

5. 清除浏览器默认样式

浏览器自带默认样式，body 的字体，各种标签的内容样式等。

若我们需要去除浏览器自带的默认样式，则需要写大量代码，才能将浏览器的默认样式清空。

这里为各位提供一套清空浏览器默认样式的 CSS 代码，

各位只需要将其保存成 CSS 文件，每次 HTML 引入该文件，即可完成浏览器默认样式的清空。

注意：这里不用* 通配符，是为了加快网页效果加载