background背景色使用

# `background` 基础

# 1. `background` 属性

background 是一个简写属性，可以同时设置多个背景相关的属性。它的基本语法如下：

background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment] [background-clip] [background-origin] [background-color];

# 2. 常用的背景属性

以下是各个背景属性的详细说明和示例：

# 2.1 背景颜色

设置元素的背景颜色。

.element {
    background-color: #ffcc00; /* 黄色 */
}

1
2
3

# 2.2 背景图片

设置元素的背景图片。

.element {
    background-image: url('path/to/image.jpg');
}

1
2
3

# 2.3 背景重复

设置背景图片是否重复。

.element {
    background-repeat: no-repeat; /* 不重复 */
}

1
2
3

可选值包括：

repeat：默认值，背景图像在水平和垂直方向上都重复。
repeat-x：只在水平方向上重复。
repeat-y：只在垂直方向上重复。
no-repeat：不重复。

# 2.4 背景位置

设置背景图片的位置。

.element {
    background-position: center; /* 居中 */
}

1
2
3

可选值包括：

top left、top center、top right
center left、center、center right
bottom left、bottom center、bottom right

# 2.5 背景大小

设置背景图片的大小。

.element {
    background-size: cover; /* 覆盖整个元素 */
}

1
2
3

可选值包括：

cover：背景图像覆盖整个元素，可能会裁剪。
contain：背景图像保持比例缩放并包含在元素内。

# 2.6 背景固定

设置背景图像是否随元素滚动。

.element {
    background-attachment: fixed; /* 背景固定 */
}

1
2
3

可选值包括：

scroll：默认值，背景图像随元素内容滚动。
fixed：背景图像固定在视口，即使内容滚动也不移动。

# 3. 综合示例

以下是一个使用多个背景属性的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景示例</title>
    <style>
        .background-example {
            width: 100%;
            height: 100vh; /* 使元素充满整个视口高度 */
            background: 
                #ffcc00, /* 背景颜色 */
                url('path/to/image.jpg') no-repeat center; /* 背景图片 */
            background-size: cover; /* 背景图像覆盖整个元素 */
            background-attachment: fixed; /* 背景固定 */
        }
    </style>
</head>
<body>
    <div class="background-example">
        <h1>欢迎来到我的网站</h1>
    </div>
</body>
</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

# 4. 注意事项

图像路径: 确保使用正确的图像路径，以便背景图片能够显示。
浏览器兼容性: 虽然大多数现代浏览器都支持背景属性，但仍需注意某些老旧浏览器可能不完全支持。

# 总结

background 属性在设置 HTML 元素的背景时非常灵活，能够同时处理颜色、图像、大小和位置等多个背景设置。通过合理的使用背景属性，你可以有效地增强页面的视觉效果和用户体验。

如有其他问题或需要更深入的讨论，请随时告诉我！

# `background-repeat`

# 1. 属性值及其效果

# 1.1 `repeat`

描述: 默认值，背景图像在水平和垂直方向上都重复。
适用场景: 当背景图像较小，且希望在整个元素中填充时使用。

.element {
    background-image: url('path/to/small-image.jpg');
    background-repeat: repeat;
}

1
2
3
4

# 1.2 `repeat-x`

描述: 背景图像在水平方向上重复，而在垂直方向上不重复。
适用场景: 当你希望背景图像沿着宽度填充，但高度保持不变时使用。

.element {
    background-image: url('path/to/small-image.jpg');
    background-repeat: repeat-x;
}

1
2
3
4

# 1.3 `repeat-y`

描述: 背景图像在垂直方向上重复，而在水平方向上不重复。
适用场景: 当你希望背景图像沿着高度填充，但宽度保持不变时使用。

.element {
    background-image: url('path/to/small-image.jpg');
    background-repeat: repeat-y;
}

1
2
3
4

# 1.4 `no-repeat`

描述: 背景图像不重复。
适用场景: 当你希望背景图像仅显示一次，或者希望用更大的图像填充并且不重复时使用。

.element {
    background-image: url('path/to/large-image.jpg');
    background-repeat: no-repeat;
}

1
2
3
4

# 2. 场景示例

以下是一个简单的示例，展示了不同的 background-repeat 值如何影响背景图像的显示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景重复示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .section {
            padding: 40px;
            margin: 20px 0;
            color: white;
            text-align: center;
        }
        .repeat {
            background-color: #3498db;
            background-image: url('https://via.placeholder.com/50'); /* 小图 */
            background-repeat: repeat;
        }
        .repeat-x {
            background-color: #e74c3c;
            background-image: url('https://via.placeholder.com/50');
            background-repeat: repeat-x;
        }
        .repeat-y {
            background-color: #2ecc71;
            background-image: url('https://via.placeholder.com/50');
            background-repeat: repeat-y;
        }
        .no-repeat {
            background-color: #9b59b6;
            background-image: url('https://via.placeholder.com/200'); /* 大图 */
            background-repeat: no-repeat;
            background-position: center; /* 居中显示 */
        }
    </style>
</head>
<body>

    <div class="section repeat">
        <h1>重复背景（repeat）</h1>
        <p>背景图像在水平方向和垂直方向上都重复。</p>
    </div>

    <div class="section repeat-x">
        <h1>横向重复背景（repeat-x）</h1>
        <p>背景图像在水平方向上重复，垂直方向上不重复。</p>
    </div>

    <div class="section repeat-y">
        <h1>纵向重复背景（repeat-y）</h1>
        <p>背景图像在垂直方向上重复，水平方向上不重复。</p>
    </div>

    <div class="section no-repeat">
        <h1>不重复背景（no-repeat）</h1>
        <p>背景图像只显示一次，且居中。</p>
    </div>

</body>
</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
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
56
57
58
59
60
61
62
63
64
65

# 3. 结论

在设计时根据背景图像的特性和设计需求选择合适的 background-repeat 属性值，可以实现丰富多样的视觉效果。通过适当的使用，可以增强用户体验和页面的美观性。

# `background-position`

# 1. 属性值及其效果

# 1.1 `top left`

描述: 背景图像定位在元素的左上角。
适用场景: 当你希望背景图像与元素的左上角对齐时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: top left;
}

1
2
3
4

# 1.2 `top center`

描述: 背景图像定位在元素的顶部中间。
适用场景: 当你希望背景图像在顶部居中时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: top center;
}

1
2
3
4

# 1.3 `top right`

描述: 背景图像定位在元素的右上角。
适用场景: 当你希望背景图像与元素的右上角对齐时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: top right;
}

1
2
3
4

# 1.4 `center left`

描述: 背景图像定位在元素的左侧中间。
适用场景: 当你希望背景图像在左侧垂直居中时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: center left;
}

1
2
3
4

# 1.5 `center`

描述: 背景图像定位在元素的中央。
适用场景: 当你希望背景图像在元素中居中展示时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: center;
}

1
2
3
4

# 1.6 `center right`

描述: 背景图像定位在元素的右侧中间。
适用场景: 当你希望背景图像在右侧垂直居中时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: center right;
}

1
2
3
4

# 1.7 `bottom left`

描述: 背景图像定位在元素的左下角。
适用场景: 当你希望背景图像与元素的左下角对齐时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: bottom left;
}

1
2
3
4

# 1.8 `bottom center`

描述: 背景图像定位在元素的底部中间。
适用场景: 当你希望背景图像在底部居中时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: bottom center;
}

1
2
3
4

# 1.9 `bottom right`

描述: 背景图像定位在元素的右下角。
适用场景: 当你希望背景图像与元素的右下角对齐时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-position: bottom right;
}

1
2
3
4

# 2. 场景示例

以下是一个完整的示例，展示了不同的 background-position 值如何影响背景图像的显示效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景定位示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .section {
            padding: 40px;
            margin: 20px 0;
            color: white;
            text-align: center;
            height: 200px; /* 设置固定高度以展示效果 */
        }
        .top-left {
            background-color: #3498db; /* 背景颜色 */
            background-image: url('https://via.placeholder.com/300');
            background-position: top left; /* 左上角 */
            background-repeat: no-repeat;
        }
        .top-center {
            background-color: #e74c3c;
            background-image: url('https://via.placeholder.com/300');
            background-position: top center; /* 顶部居中 */
            background-repeat: no-repeat;
        }
        .top-right {
            background-color: #2ecc71;
            background-image: url('https://via.placeholder.com/300');
            background-position: top right; /* 右上角 */
            background-repeat: no-repeat;
        }
        .center {
            background-color: #9b59b6;
            background-image: url('https://via.placeholder.com/300');
            background-position: center; /* 中间 */
            background-repeat: no-repeat;
        }
        .bottom-left {
            background-color: #f39c12;
            background-image: url('https://via.placeholder.com/300');
            background-position: bottom left; /* 左下角 */
            background-repeat: no-repeat;
        }
        .bottom-center {
            background-color: #d35400;
            background-image: url('https://via.placeholder.com/300');
            background-position: bottom center; /* 底部居中 */
            background-repeat: no-repeat;
        }
        .bottom-right {
            background-color: #8e44ad;
            background-image: url('https://via.placeholder.com/300');
            background-position: bottom right; /* 右下角 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

    <div class="section top-left">
        <h1>左上角定位（top left）</h1>
        <p>背景图像定位在元素的左上角。</p>
    </div>

    <div class="section top-center">
        <h1>顶部居中定位（top center）</h1>
        <p>背景图像定位在元素的顶部中间。</p>
    </div>

    <div class="section top-right">
        <h1>右上角定位（top right）</h1>
        <p>背景图像定位在元素的右上角。</p>
    </div>

    <div class="section center">
        <h1>中心定位（center）</h1>
        <p>背景图像定位在元素的中央。</p>
    </div>

    <div class="section bottom-left">
        <h1>左下角定位（bottom left）</h1>
        <p>背景图像定位在元素的左下角。</p>
    </div>

    <div class="section bottom-center">
        <h1>底部居中定位（bottom center）</h1>
        <p>背景图像定位在元素的底部中间。</p>
    </div>

    <div class="section bottom-right">
        <h1>右下角定位（bottom right）</h1>
        <p>背景图像定位在元素的右下角。</p>
    </div>

</body>
</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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

# 3. 结论

通过使用不同的 background-position 属性值，可以精确控制背景图像在元素中的显示位置。这在设计时能帮助你实现各种视觉效果，使页面更加生动和吸引人。

# `background-size`

默认值: auto
- 当 background-size 设置为 auto 时，背景图像将保持其原始尺寸（即图像文件的实际尺寸）。如果没有其他属性（如 background-repeat）限制，图像可能会重复显示。

# 2. 属性值及其使用场景

# 2.1 `auto`

描述: 背景图像的宽度和高度保持原始尺寸。
适用场景: 当你希望保持图像的原始比例和清晰度时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-size: auto; /* 背景图像保持原始尺寸 */
}

1
2
3
4

# 2.2 `cover`

描述: 背景图像会按比例缩放，以完全覆盖元素，可能会裁剪图像的某部分。
适用场景: 当你希望背景图像填充整个元素，且不在意裁剪掉部分图像时使用。例如，在全屏背景图像的场景中。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-size: cover; /* 背景图像完全覆盖元素 */
}

1
2
3
4

# 2.3 `contain`

描述: 背景图像按比例缩放，以确保整个图像都在元素内显示，可能会留有空白区域。
适用场景: 当你希望确保显示完整的背景图像，同时保持图像的比例时使用。这常用于图像不应被裁剪的场景。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-size: contain; /* 背景图像保持完整显示 */
}

1
2
3
4

# 2.4 指定尺寸

描述: 你可以使用具体的尺寸（如 px、% 等）来设置背景图像的宽度和高度。
适用场景: 当你需要将背景图像调整为特定尺寸时使用。

.element {
    background-image: url('https://via.placeholder.com/300');
    background-size: 150px 100px; /* 背景图像设置为具体尺寸 */
}

1
2
3
4

# 3. 场景示例

以下是一个示例，展示了使用不同 background-size 值的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景大小示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .section {
            padding: 40px;
            margin: 20px 0;
            color: white;
            text-align: center;
            height: 200px; /* 设置固定高度以展示效果 */
        }
        .auto {
            background-color: #3498db;
            background-image: url('https://via.placeholder.com/300');
            background-size: auto; /* 原始尺寸 */
            background-repeat: no-repeat;
        }
        .cover {
            background-color: #e74c3c;
            background-image: url('https://via.placeholder.com/300');
            background-size: cover; /* 完全覆盖 */
            background-repeat: no-repeat;
        }
        .contain {
            background-color: #2ecc71;
            background-image: url('https://via.placeholder.com/300');
            background-size: contain; /* 完整显示 */
            background-repeat: no-repeat;
        }
        .specific-size {
            background-color: #9b59b6;
            background-image: url('https://via.placeholder.com/300');
            background-size: 150px 100px; /* 具体尺寸 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>

    <div class="section auto">
        <h1>原始尺寸（auto）</h1>
        <p>背景图像保持原始尺寸。</p>
    </div>

    <div class="section cover">
        <h1>完全覆盖（cover）</h1>
        <p>背景图像填充整个元素，可能会裁剪。</p>
    </div>

    <div class="section contain">
        <h1>完整显示（contain）</h1>
        <p>背景图像保持完整显示，可能会留有空白区域。</p>
    </div>

    <div class="section specific-size">
        <h1>具体尺寸（150px 100px）</h1>
        <p>背景图像设置为150px宽、100px高。</p>
    </div>

</body>
</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
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# 4. 结论

background-size 属性允许开发者灵活地控制背景图像的显示方式，通过合理选择不同的值，可以有效地满足设计需求。了解每个值的使用场景，能帮助你在页面布局和设计中做出更好的决策。

在使用 background-size: contain 属性时，背景图像的缩放比例是根据元素的尺寸和背景图像的原始尺寸来决定的。通俗地说，缩放比例的计算取决于元素的宽度和高度，以及图像的宽度和高度之间的关系。下面以简单的步骤和逻辑解释这一过程。

# 缩放比例的基本概念

宽高比：是指图像宽度与高度的比例。
目标：确保图像在元素内完整显示，同时保持图像的原始比例。

# 2. 计算步骤

获取元素和图像的尺寸：
- 记录元素的宽度 (elementWidth) 和高度 (elementHeight)。
- 记录图像的原始宽度 (imageWidth) 和高度 (imageHeight)。
计算宽高比：
- 计算元素的宽高比：elementAspectRatio = elementWidth / elementHeight
- 计算图像的宽高比：imageAspectRatio = imageWidth / imageHeight
决定缩放方式：
- 如果元素的宽高比大于图像的宽高比（例如，元素更宽）：
  - 图像将根据宽度进行缩放，以使其宽度填满元素的宽度。
  - 缩放后的高度会根据图像的原始比例计算。
- 如果元素的宽高比小于图像的宽高比（例如，元素更高）：
  - 图像将根据高度进行缩放，以使其高度填满元素的高度。
  - 缩放后的宽度会根据图像的原始比例计算。

# 3. 具体示例

假设：

元素尺寸: elementWidth = 600px, elementHeight = 400px
图像尺寸: imageWidth = 300px, imageHeight = 200px

# 计算过程：

计算宽高比：
- elementAspectRatio = 600 / 400 = 1.5
- imageAspectRatio = 300 / 200 = 1.5
比较宽高比：
- 由于 1.5 等于 1.5，它们的比例相同。
缩放：
- 因为宽高比相同，图像的缩放将根据宽度和高度都保持一致：
  - scaledWidth = elementWidth = 600px
  - scaledHeight = 400px（保持原比例）

# 4. 总结

缩放依据：缩放是根据元素的宽高比与图像的宽高比进行比较。
优先缩放：当元素更宽时，图像根据其宽度进行缩放；当元素更高时，图像根据其高度进行缩放。
保持比例：无论哪个方向进行缩放，图像的比例始终保持不变，避免失真。

# CSS3 中的渐变色

# 1. 线性渐变 (Linear Gradient)

线性渐变是沿着一条直线（可以是水平、垂直或对角线）过渡的颜色变化。

# 1.1 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: 渐变方向，可以用角度（如 90deg）、关键字（如 to right、to left、to top、to bottom）来指定。
color-stop: 定义颜色和位置，可以包含一个或多个颜色值，支持透明度。

# 1.2 示例

.element {
    background: linear-gradient(to right, red, yellow);
}

1
2
3

这个示例中，背景从左到右渐变，从红色过渡到黄色。

# 1.3 多个颜色

可以在渐变中添加多个颜色：

.element {
    background: linear-gradient(to right, red, orange, yellow, green);
}

1
2
3

# 2. 径向渐变 (Radial Gradient)

径向渐变是从中心点向外扩展的颜色过渡效果。

# 2.1 语法

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape: 渐变的形状，可以是 circle（圆形）或 ellipse（椭圆形）。
size: 渐变的大小，如 closest-side、farthest-side、closest-corner、farthest-corner。
position: 渐变的起始位置，默认为中心。
color-stop: 定义颜色和位置。

# 2.2 示例

.element {
    background: radial-gradient(circle, red, yellow);
}

1
2
3

这个示例中，背景从中心向外渐变，从红色过渡到黄色。

# 2.3 定义渐变位置

可以自定义渐变的具体位置：

.element {
    background: radial-gradient(circle at 50% 50%, red, yellow, green);
}

1
2
3

这会创建一个从中心开始的圆形渐变。

# 3. 结合渐变的其他属性

你可以结合渐变与其他 CSS 属性，如 background-size、background-position 等，来实现更加复杂的设计效果。例如：

.element {
    background: linear-gradient(to right, red, yellow);
    background-size: 200% 100%; /* 使渐变拉伸 */
    animation: gradientAnimation 5s ease infinite; /* 添加动画 */
}

@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

1
2
3
4
5
6
7
8
9
10

# 4. 总结

CSS3 的渐变色为开发者提供了强大的视觉效果，能够创建出丰富多彩的设计而无需依赖外部图像。线性渐变和径向渐变可以通过不同的方向、颜色和形状组合来实现各种效果，这使得网页和应用程序的界面更具吸引力。

在线编辑

上次更新: 2025/02/25, 18:30:54

← 常用到尺寸单位 css过渡→

background背景色使用

# background 基础

# 1. background 属性

# 2. 常用的背景属性

# 2.1 背景颜色

# 2.2 背景图片

# 2.3 背景重复

# 2.4 背景位置

# 2.5 背景大小

# 2.6 背景固定

# 3. 综合示例

# 4. 注意事项

# 总结

# background-repeat

# 1. 属性值及其效果

# 1.1 repeat

# 1.2 repeat-x

# 1.3 repeat-y

# 1.4 no-repeat

# 2. 场景示例

# 3. 结论

# background-position

# 1. 属性值及其效果

# 1.1 top left

# 1.2 top center

# 1.3 top right

# 1.4 center left

# 1.5 center

# 1.6 center right

# 1.7 bottom left

# 1.8 bottom center

# 1.9 bottom right

# 2. 场景示例

# 3. 结论

# background-size

# 2. 属性值及其使用场景

# 2.1 auto

# 2.2 cover

# 2.3 contain

# 2.4 指定尺寸

# 3. 场景示例

# 4. 结论

# 缩放比例的基本概念

# 2. 计算步骤

# 3. 具体示例

# 计算过程：

# 4. 总结

# CSS3 中的渐变色

# 1. 线性渐变 (Linear Gradient)

# 1.1 语法

# 1.2 示例

# 1.3 多个颜色

# 2. 径向渐变 (Radial Gradient)

# 2.1 语法

# 2.2 示例

# 2.3 定义渐变位置

# 3. 结合渐变的其他属性

# 4. 总结

# `background` 基础

# 1. `background` 属性

# `background-repeat`

# 1.1 `repeat`

# 1.2 `repeat-x`

# 1.3 `repeat-y`

# 1.4 `no-repeat`

# `background-position`

# 1.1 `top left`

# 1.2 `top center`

# 1.3 `top right`

# 1.4 `center left`

# 1.5 `center`

# 1.6 `center right`

# 1.7 `bottom left`

# 1.8 `bottom center`

# 1.9 `bottom right`

# `background-size`

# 2.1 `auto`

# 2.2 `cover`

# 2.3 `contain`