文章目录

1. 背景
2. 背景半透明色
3.综合案例

在这里插入图片描述

1. 背景

1.1 定义

css 背景属性包括 背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1.2 背景颜色

1.2.1 定义

背景颜色通过 background-color 属性定义

1.2.2 语法

background-color: 颜色;

这个属性默认值为 transparent （透明色）。

1.2.3 示例

html （给 div 盒子设置背景色，盒子宽高为 120px ）
```
<body>
    <div>平平无奇小盒子</div>
</body>
```

css

<style>
    div {
        width: 120px;
        height: 120px;
        background-color: red;
    }
</style>

效果

1.3 背景图片

1.3.1 定义

背景图片通过 background-image 属性定义。我们图片明明可以在 html 直接用 img 标签的 src 属性来定义，为什么还要多出背景图片这个属性呢？因为使用这个属性可以帮助我们更好控制图片的位置，所以在实际开发中，这个属性常用于 logo 或者一些小图片，超大的背景图片，精灵图（可以认为是很多个小图片组成的一张图片，可以减少图片存储的数量）

1.3.2 语法

background-image: none | url(url);

这个属性默认值为 none ，即没有背景图片。

url 可以使用绝对路径或相对路径指定背景图片。（里面的url不要加引号，不然图片会出不来）

1.3.3 示例

rocket图片
html （在 div 盒子中放置 rocket 作为背景图片，盒子的宽高为 500px）
```
<body>
    <div></div>
</body>
```

css

<style>
    div {
        width: 500px;
        height: 500px;
        background-image: url(./rocket.png);
    }
</style>

效果

我们发现一个小火箭变成了多个小火箭，也就是说背景图片发生了重叠。在接下来的背景平铺将讲述解决方法。

1.4 背景平铺

1.4.1 定义

背景平铺通过 background-repeat 属性定义

1.4.2 语法

background-repeat: repeat | no-repeat | repeat-x | repeat-y;

属性值	描述
repeat	默认值，x 和 y 轴都平铺
no-repeat	x 和 y 轴都不平铺
repeat-x	x 平铺，y 不平铺
repeat-y	y 平铺，x 不平铺

1.4.3 示例

html （在 div 盒子中放置 rocket 作为背景图片，盒子的宽高为 500px ，并设置背景颜色为红色）
```
<body>
    <div></div>
</body>
```

css

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(./rocket.png);
        background-repeat: no-repeat;
    }
</style>

效果

我们看到小火箭又重新变成一个了，剩下的都是背景颜色，这里可以得到一个结论：背景颜色的图层在背景图片的上层，所以背景颜色才会被背景图片覆盖。
repeat-x 和 repeat-y

上面为 repeat-x，下面为 repeat-y

1.5 背景图片位置

1.5.1 定义

背景图片位置通过 background-position 属性定义

1.5.2 语法

background-position: x y;

属性值	描述
length	百分数 \| 具体数字 + 长度单位，分别表示 x y
position	top \| center \| bottom \| left \| center \| right 这些方位名词

注意点
1. 如果参数都是方位名词，值的顺序无区别，如 left center = center left
2. 如果写了一个方位名词，另一个省略，另一个的默认值为 center
3. 如果参数是精确长度，第一个一定是 x 坐标，第二个一定是 y 坐标
4. 如果写了一个精确长度，那么该值一定是 x 坐标，y 坐标默认值为 center
5. 支持方位名词和精确长度的混用，混用时，第一个一定是 x 坐标，第二个一定是 y 坐标

1.5.3 示例

html （在 div 盒子中放置 rocket 作为背景图片，盒子的宽高为 500px ，并设置背景颜色为红色，使背景图处于盒子水平垂直居中的位置）
```
<body>
    <div></div>
</body>
```

css

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
        background-image: url(./rocket.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>

效果

1.6 背景图像固定

1.6.1 定义

背景图像固定通过 background-attachment 属性定义，可以设置背景图像是否随滚轮滚动。所以，它常常用来制作一直在某个位置的广告。

1.6.2 语法

background-attachment: scroll | fixed;

属性值	描述
scroll	背景图随滚轮滚动
fixed	背景图固定

1.6.3 示例

html （在 div 盒子中放置 rocket 作为背景图片，盒子的宽高为 2000px ：为了使页面有滚动条，并设置背景颜色为红色，使背景图片在滚动时一直处于同一位置）
```
<body>
    <div></div>
</body>
```

css

<style>
    div {
        width: 2000px;
        height: 2000px;
        background-color: red;
        background-image: url(./rocket.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
</style>

效果略

1.7 背景复合属性

1.7.1 定义

和 font (字体) 类似，背景也有复合属性，为 background

1.7.2 语法

background: 背景颜色 背景图片 背景平铺 背景图像滚动 背景图片位置

虽然没有特定书写习惯，但还是建议像上面这样写，因为有一些属性调换顺序会报错。

2. 背景半透明色

2.1 定义

我们在字体颜色时讲过我们颜色是以 rgb 值来表示，而如果要表示颜色的透明度的话，可以用 rgba() 表示，前三个参数和 rgb 的参数一致，最后一个参数为 alpha (透明度)，其值为 0~1

2.2 语法

rgba(red值 green值 blue值 alpha);

其实，这个属性与其说是透明度，倒不如说是不透明度。因为 1 表示不透明，0 表示完全透明。

2.3 示例

html（设置 div 盒子的宽高均为200px，背景颜色为黑色，透明度为 0.5）
```
<body>
    <div></div>
</body>
```

css

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>

效果

3.综合案例

3.1 要求（制作一个五彩导航）