编辑“︁CSS背景尺寸（background-size）”︁

= CSS背景尺寸（background-size） =

'''CSS背景尺寸'''（background-size）是一个用于控制背景图像显示大小的CSS属性。通过该属性，开发者可以精确调整背景图片的宽度和高度，使其适应不同容器或实现特定的视觉效果。本教程将详细介绍该属性的语法、取值、应用场景及实际示例，适合从初学者到高级开发者的学习需求。

== 基本介绍 ==

在CSS中，'''background-size'''属性用于指定背景图像的大小。默认情况下，背景图像会以其原始尺寸显示，但通过该属性，可以将其拉伸、缩放或保持比例以适应容器。该属性通常与'''background-image'''、'''background-repeat'''等属性一起使用。

=== 语法 ===
<pre>
background-size: <width> <height> | contain | cover | auto | initial | inherit;
</pre>

其中：
* '''<width> <height>'''：指定背景图像的宽度和高度，可以是具体数值（如像素、百分比）或关键字。
* '''contain'''：缩放图像以完全适应容器，同时保持宽高比。
* '''cover'''：缩放图像以完全覆盖容器，可能裁剪部分图像。
* '''auto'''：保持图像的原始宽高比。

== 属性取值详解 ==

=== 1. 具体数值 ===
可以指定一个或两个值（宽度和高度）：
* 如果只提供一个值，第二个值默认为'''auto'''（保持比例）。
* 单位可以是像素（px）、百分比（%）或其他CSS长度单位。

示例：
<syntaxhighlight lang="css">
.box {
    background-image: url("example.jpg");
    background-size: 200px 150px; /* 固定宽度和高度 */
}
</syntaxhighlight>

=== 2. contain ===
确保图像完整显示在容器内，不裁剪图像。如果容器宽高比与图像不一致，会留下空白区域。

示例：
<syntaxhighlight lang="css">
.box {
    background-image: url("example.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}
</syntaxhighlight>

=== 3. cover ===
确保图像覆盖整个容器，可能裁剪部分图像以保持比例。

示例：
<syntaxhighlight lang="css">
.box {
    background-image: url("example.jpg");
    background-size: cover;
}
</syntaxhighlight>

=== 4. auto ===
保持图像的原始尺寸或比例。

示例：
<syntaxhighlight lang="css">
.box {
    background-image: url("example.jpg");
    background-size: auto 100%; /* 高度固定为容器高度，宽度自动调整 */
}
</syntaxhighlight>

== 实际应用案例 ==

=== 案例1：全屏背景 ===
在网页设计中，常用'''cover'''实现全屏背景，确保图像覆盖整个视口。

<syntaxhighlight lang="css">
body {
    background-image: url("background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
</syntaxhighlight>

=== 案例2：响应式背景 ===
使用百分比单位使背景图像随容器大小变化。

<syntaxhighlight lang="css">
.card {
    background-image: url("card-bg.png");
    background-size: 100% auto; /* 宽度占满容器，高度自适应 */
}
</syntaxhighlight>

=== 案例3：保持比例 ===
通过'''contain'''确保图像完整显示，适合图标或标志。

<syntaxhighlight lang="css">
.logo {
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 200px;
    height: 100px;
}
</syntaxhighlight>

== 高级技巧 ==

=== 多背景图像 ===
可以为元素设置多个背景图像，并分别指定大小。

<syntaxhighlight lang="css">
.element {
    background-image: url("layer1.png"), url("layer2.png");
    background-size: 50% 100%, cover; /* 第一个图像宽度50%，第二个图像覆盖 */
    background-repeat: no-repeat;
}
</syntaxhighlight>

=== 与渐变结合 ===
'''background-size'''也可用于控制渐变背景的大小。

<syntaxhighlight lang="css">
.gradient-box {
    background: linear-gradient(to right, red, blue);
    background-size: 200% 100%; /* 创建动画效果的基础 */
}
</syntaxhighlight>

== 常见问题与解决方案 ==

{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 背景图像被拉伸变形 || 使用'''contain'''或'''cover'''保持比例
|-
| 图像显示不全 || 检查容器尺寸或改用'''contain'''
|-
| 多背景层叠顺序混乱 || 确保'''background-size'''与'''background-image'''顺序一致
|}

== 总结 ==

'''background-size'''是控制背景图像显示的核心属性，通过灵活运用其取值（如具体数值、contain、cover），可以实现响应式布局、全屏背景等效果。结合其他背景属性，开发者能够创建丰富的视觉体验。

== 延伸学习 ==
* 尝试为不同屏幕尺寸设置不同的'''background-size'''值。
* 探索与'''background-position'''的配合使用，实现更精确的定位。

<mermaid>
graph TD
    A[background-size] --> B[具体数值]
    A --> C[contain]
    A --> D[cover]
    A --> E[auto]
    B --> F[固定尺寸]
    B --> G[百分比]
    C --> H[完整显示]
    D --> I[覆盖容器]
</mermaid>

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS颜色与背景]]