编辑“︁CSS背景图像”︁（章节）

= CSS背景图像 =

CSS背景图像是一种强大的样式工具，允许开发者将图像设置为HTML元素的背景，实现丰富的视觉效果。本教程将详细介绍其语法、属性和实际应用。

== 基本概念 ==

CSS背景图像通过`background-image`属性实现，其基本语法为：
<syntaxhighlight lang="css">
selector {
    background-image: url('image-path.ext');
}
</syntaxhighlight>

当图像尺寸小于元素时，默认会平铺（repeat）填充整个区域。背景图像不会影响内容布局，始终位于内容下层。

== 核心属性 ==

=== 1. 背景定位（background-position） ===
控制图像在元素中的起始位置：
<syntaxhighlight lang="css">
/* 关键字值 */
background-position: center top;

/* 百分比值 */
background-position: 25% 75%;

/* 长度值 */
background-position: 20px 50px;
</syntaxhighlight>

<mermaid>
pie
    title 定位值类型使用频率
    "关键字" : 45
    "百分比" : 30
    "固定值" : 25
</mermaid>

=== 2. 背景重复（background-repeat） ===
控制平铺行为：
<syntaxhighlight lang="css">
background-repeat: repeat-x;  /* 水平平铺 */
background-repeat: no-repeat; /* 禁用平铺 */
background-repeat: space;     /* 等间距平铺 */
</syntaxhighlight>

=== 3. 背景附着（background-attachment） ===
定义滚动行为：
<syntaxhighlight lang="css">
background-attachment: fixed;  /* 相对于视口固定 */
background-attachment: local;  /* 随元素内容滚动 */
</syntaxhighlight>

=== 4. 背景大小（background-size） ===
控制图像尺寸：
<syntaxhighlight lang="css">
background-size: cover;    /* 完全覆盖区域 */
background-size: contain;  /* 完整显示图像 */
background-size: 50% auto; /* 自定义尺寸 */
</syntaxhighlight>

== 复合属性 ==
使用`background`简写属性：
<syntaxhighlight lang="css">
div {
    background: 
        url('banner.jpg') 
        center/cover 
        no-repeat 
        fixed 
        #f5f5f5;
}
</syntaxhighlight>
属性顺序：image → position/size → repeat → attachment → color

== 高级技巧 ==

=== 多重背景 ===
支持多个背景层叠加：
<syntaxhighlight lang="css">
.hero {
    background: 
        url('texture.png'),
        linear-gradient(to right, #ff8a00, #e52e71);
    background-blend-mode: overlay;
}
</syntaxhighlight>

=== 性能优化 ===
* 使用CSS渐变替代小图案
* 雪碧图（CSS Sprites）减少HTTP请求
* 优先使用WebP格式

== 实际案例 ==

=== 案例1：全屏英雄区域 ===
<syntaxhighlight lang="css">
.hero-section {
    height: 100vh;
    background: 
        url('hero-bg.jpg') 
        center/cover 
        no-repeat;
    display: flex;
    align-items: center;
}
</syntaxhighlight>

=== 案例2：纹理叠加效果 ===
<syntaxhighlight lang="css">
.card {
    background: 
        url('noise.png'),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-blend-mode: multiply;
}
</syntaxhighlight>

== 常见问题 ==

'''Q: 背景图像不显示怎么办？'''
* 检查路径是否正确（相对/绝对路径）
* 确认图像文件存在且可访问
* 检查元素是否有有效尺寸

'''Q: 如何实现响应式背景？'''
使用视窗单位或媒体查询：
<syntaxhighlight lang="css">
@media (max-width: 768px) {
    .banner {
        background-size: auto 100%;
    }
}
</syntaxhighlight>

== 数学原理 ==
当使用百分比定位时，计算公式为：
<math>
x_{position} = (元素宽度 - 图像宽度) \times x_{百分比}
</math>
<math>
y_{position} = (元素高度 - 图像高度) \times y_{百分比}
</math>

== 浏览器支持 ==
所有现代浏览器完全支持CSS3背景属性。对于IE9以下版本，需提供备用方案：
<syntaxhighlight lang="css">
.legacy-bg {
    background-image: url('fallback.jpg'); /* IE8 */
    background-image: url('modern.webp'), none; /* 现代浏览器 */
}
</syntaxhighlight>

== 最佳实践 ==
1. 始终设置备用背景色
2. 高对比度内容需确保可读性
3. 移动端考虑图像尺寸和流量
4. 使用`@media (prefers-reduced-motion)`尊重用户偏好

通过掌握这些技术，您可以创建视觉吸引力强且性能优化的网页设计。

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