第五章：精通视觉表现：背景、列表与装饰

第五章：精通视觉表现：背景、列表与装饰

摘要: 本章我们将专注于提升页面的视觉表现力。您将系统学习如何使用强大的 background 属性为元素添加颜色、渐变、图片等丰富的背景效果，此外，我们还将深入探讨列表、轮廓的自定义样式，以及如何利用 z-index 控制元素的层叠顺序，为您的网页增添更多精致的细节。

在本章的学习地图中，我们将：

  1. 首先，深入探索 背景 (background) 属性全家桶，学习如何为元素打造丰富的视觉层次。
  2. 接着，我们将学习如何通过 列表样式 (list-style) 来自定义项目符号。
  3. 然后，我们将辨析 轮廓 (outline) 与边框的区别，并学习如何控制元素的 层叠顺序 (z-index)。
  4. 最后，我们将通过 核心速查总结 来巩固本章所有知识点。

5.1. 背景 (background)：网页的“皮肤”

背景是元素内容之下的“画布”，通过一系列 background-* 属性，我们可以精确地控制这个画布的外观。

5.1.1. 核心背景属性

属性说明常用值举例
background-color设置纯色背景#FFF, rgb(0,0,0), transparent
background-image设置背景图片url('path/to/image.jpg')
background-repeat控制图片平铺方式no-repeat (不平铺, 只显示一次), repeat (平铺)
background-position设置图片位置center, top right, 50% 50%
background-size控制图片尺寸cover (铺满), contain (完整显示)
background-attachment背景是否随页面滚动scroll (滚动), fixed (固定)
background (简写)将以上属性写在一行blue url(...) no-repeat center / cover

简写属性 background 顺序提示:

color image repeat attachment position / size (注意 size 前必须有 /)

5.1.2. 核心实战技巧

除了基础属性的设置，background 属性的真正威力体现在其组合应用上。以下是三个在开发中几乎必然会遇到的实战技巧。

技巧一：实现半透明背景 (rgba vs opacity)

  • 场景: 需要一个半透明的叠加层，但又不希望层内的文字也变透明。
  • 方案: 使用 background-color: rgba(...) 而非 opacity。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style>
    .demo-container {
        display: flex;
        /* 使用 flex 布局让盒子并排 */
        justify-content: space-around;
        padding: 20px;
        background-color: #f0f0f0;
    }

    .box {
        width: 45%;
        padding: 20px;
        color: #333;
        border: 2px solid #333;
    }

    .bad-case {
        background-color: red;
        /* 错误方式：文字和背景都变透明了 */
        opacity: 0.2;
        color: yellow;
    }

    .good-case {
        /* 正确方式：仅背景半透明，文字保持不透明 */
        background-color: rgba(255, 0, 0, 0.2);
        color: yellow;
    }
</style>

    <div class="demo-container">
        <div class="box bad-case">
            <h3>错误示范 (opacity)</h3>
            <p>这段文字也变得半透明了，难以阅读。</p>
        </div>
        <div class="box good-case">
            <h3>正确示范 (rgba)</h3>
            <p>这段文字保持清晰，仅背景是半透明的。</p>
        </div>
    </div>

技巧二：全屏背景图 (Full-Screen Background)

  • 场景: 网站的首页、登录页或活动页，需要一张高清大图作为背景，铺满整个浏览器视口。
  • 方案: 将背景图应用到 html 或 body 标签，并结合 background-size: cover 和 background-attachment: fixed。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏背景图示例</title>
    <style>
        /* 1. 基础重置，确保没有多余的边距 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: sans-serif;
        }

        html {
            /* 2. 设置背景图 */
            background-image: url(https://picsum.photos/1920/1080);

            /* 3. 让背景图相对于视口固定，不随内容滚动 */
            background-attachment: fixed;

            /* 4. 确保图片从中心开始显示 */
            background-position: center center;

            /* 5. 禁止图片平铺 */
            background-repeat: no-repeat;

            /* 6. 核心：让图片等比缩放，直到完全覆盖背景区域 */
            background-size: cover;
        }

        /* 为了演示滚动效果而添加的内容样式 */
        .content {
            padding: 50px;
            color: white;
            text-align: center;
        }
        .content h1 {
            font-size: 4em;
            text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
        }
        .long-content {
            height: 1500px; /* 创建一个很高的容器来产生滚动条 */
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>沉浸式体验</h1>
        <p>向下滚动页面，观察背景图如何保持固定。</p>
    </div>
    <div class="long-content"></div>
</body>
</html>

技巧三：用背景图优雅填充盒子)

  • 场景: 卡片列表、相册或用户头像展示。容器尺寸是固定的，但内部的图片高宽比各不相同，需要让图片填满容器且不被拉伸变形。
  • 方案: 不要使用 <img> 标签，而是用一个 <div> 作为容器，并将图片设为其 background-image，再利用 background-size 控制填充方式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
    .card-container {
        display: flex;
        justify-content: center;
        gap: 40px;
        margin: 20px 0;
    }

    .card {
        width: 200px;
        height: 250px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-repeat: no-repeat;
        background-position: center;
    }

    #card-cover {
        background-size: cover;
        background-image: url(https://picsum.photos/400/300?random=1);
    }

    #card-contain {
        background-size: contain;
        background-color: #f0f0f0;
        background-image: url(https://picsum.photos/400/300?random=2);
    }

    .description {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        color: #555;
    }
</style>


<div class="card-container">
    <div class="card" id="card-cover"></div>
    <div class="card" id="card-contain"></div>
</div>

<p class="description">左：cover (填满容器) | 右：contain (完整显示)</p>

5.2. 列表样式 (list-style)

在第四章的实战中我们学习了使用伪元素 ::before 来创建更灵活的自定义列表符号，对于 list-style 我们最常用的仅仅只是将它设置为 none 即无符号

  • list-style-type: 改变项目符号的类型，例如 square (方块), circle (空心圆), upper-roman (大写罗马数字), none (无符号)。
  • list-style-position: outside (默认，符号在列表项外) 或 inside (符号在列表项内，会随文本缩进)。
  • list-style-image: 使用 url() 指定一张图片作为项目符号。
  • list-style (简写属性): list-style: type position image;。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .list-a { list-style: square inside; }
    .list-b { list-style-type: upper-roman; }
</style>

<ul class="list-a">
    <li>第一项 (方块, inside)</li>
    <li>第二项</li>
</ul>

<ol class="list-b">
    <li>第一项 (大写罗马数字)</li>
    <li>第二项</li>
</ol>

5.3. 轮廓 (outline) 与层叠 (z-index)

5.3.1. 轮廓 (outline)：不占空间的“高亮框”

outline 是绘制于元素 border 之外的一条线，它与 border 最大的区别在于：

核心区别: outline 不属于 盒模型的一部分，它不占据任何布局空间，不会把其他元素推开。而 border 会增加元素的实际尺寸，影响布局。

outline 常用于调试或在元素获得焦点时（:focus）提供视觉反馈，在开发中我们也并不是很常用，简单了解即可

  • outline-style: solid, dashed, dotted 等。
  • outline-width: 轮廓宽度。
  • outline-color: 轮廓颜色。
  • outline-offset: 轮廓与边框之间的距离。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    .box { width: 100px; height: 50px; margin: 20px; float: left; }
    .has-border {
        border: 10px solid #e74c3c;
        background-color: #fbe9e7;
    }
    .has-outline {
        outline: 10px solid #3498db;
        background-color: #eaf4fb;
    }
</style>

<div class="box has-border">我有 Border</div>
<div class="box has-outline">我有 Outline</div>

5.3.2. z-index：控制元素的堆叠顺序

网页是三维的，除了 X 轴和 Y 轴，还存在一个垂直于屏幕的 Z 轴。z-index 属性就用于控制元素在 Z 轴上的堆叠顺序。

前置条件: z-index 属性 仅在 元素定义了 position 属性（且值不为 static）时才有效。我们将在下一章详细学习 position，这里先作初步了解。

  • z-index 的值是一个整数，可以是正数、负数或 0。
  • 值越大的元素，层级越高，会显示在值小的元素的上方。
  • 如果没有设置 z-index，则在 HTML 中后出现的元素会叠在先出现的元素之上。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
    .overlap-box {
        width: 150px;
        height: 150px;
        position: absolute; /* 必须设置定位才能使 z-index 生效 */
        font-size: 24px;
        color: white;
        text-align: center;
        line-height: 150px;
    }
    .red-box {
        background-color: #c0392b;
        top: 20px;
        left: 20px;
        z-index: 2; /* z-index 值较大，显示在上面 */
    }
    .blue-box {
        background-color: #2980b9;
        top: 70px;
        left: 70px;
        z-index: 1; /* z-index 值较小，显示在下面 */
    }
</style>

<div class="overlap-box red-box">Z-Index: 2</div>
<div class="overlap-box blue-box">Z-Index: 1</div>

5.4. 本章核心速查总结

分类关键项核心描述
背景background-color使用 rgba() 实现仅背景半透明，是最佳实践。
background-sizecover (裁剪铺满) 和 contain (完整显示) 是响应式背景的关键。
background-position配合精灵图（Sprites）使用负值来定位图标，是性能优化技巧。
background简写属性，顺序: color image repeat attachment position / size。
列表list-style-type设置项目符号样式，可用 none 去除。
list-style-positioninside (内) 或 outside (外)。
轮廓outline不占据布局空间，不影响周围元素，常用于 :focus 状态。
层叠z-index必须配合 position (非 static) 使用。数值越大，层级越高。