本教程详细阐述了如何利用css多背景图像技术，在不使用`position: absolute`导致内容遮挡问题的前提下，实现一个背景图像位于两个独立着色`div`之间的视觉效果。通过在一个容器上叠加多个背景层（包括图片和纯色渐变），并精确控制它们的尺寸与位置，可以优雅地创建复杂的布局，同时保持内容的可见性和布局的响应性。
利用CSS多背景图像实现元素间图形叠加
在网页设计中，有时我们需要实现一个复杂的视觉布局，例如将一个装饰性图像放置在两个内容区域之间，同时确保图像不会遮挡内容。传统的position: absolute配合z-index方法虽然可以实现元素的精确定位，但当背景图像覆盖在文本或其他元素之上时，容易导致内容不可见或交互受阻。本教程将介绍一种更优雅的解决方案：利用CSS的多背景图像特性，在一个容器上叠加多个背景层，从而实现复杂的视觉效果。
遇到的问题与传统方法的局限
开发者常常会尝试使用position: absolute来定位一个背景图像，并将其z-index设置为负值，使其位于其他内容之下。然而，这种方法存在明显的局限性。例如，如果背景图像的尺寸或位置不当，它仍可能意外地覆盖到相邻的文本或其他DOM元素，导致内容显示异常。
考虑以下常见的尝试代码片段：
<div style="position: relative; z-index: 0;">
<div style="background-color: red; height: 500px; width: 100%;"></div>
<div style="background-color: blue; height: 500px; width: 100%;"></div>
<div
style="
background-repeat: no-repeat;
background-position: cover;
background-image: url(squiggle.png); /* 假设这是一个波浪形图片 */
height: 600px;
width: 451px;
position: absolute;
top: 250px;
bottom: 0;
right: 0;
z-index: -1;
"
></div>
</div>在这个例子中，一个波浪形图像被绝对定位并置于z-index: -1。虽然它被放置在红色和蓝色div的下方，但如果红色或蓝色div内部有内容，且图像与其重叠，图像仍然可能遮挡这些内容，或者其定位方式不够灵活，难以实现与父容器内容的精确对齐。
立即学习“前端免费学习笔记（深入）”；
解决方案：利用CSS多背景图像
CSS允许在一个元素上定义多个背景图像。这些背景图像会按照它们在background-image属性中声明的顺序进行堆叠，第一个声明的背景位于最上层，最后一个声明的位于最底层。通过巧妙地结合图像和linear-gradient来模拟纯色块，我们可以将所有视觉元素（包括背景图像和颜色块）都作为同一个容器的背景来处理。
这种方法的优势在于：
- 避免内容遮挡：所有视觉元素都作为背景存在，不会与容器内的实际DOM内容发生层叠冲突。
- 结构清晰：DOM结构保持简洁，无需额外的div仅用于背景图片定位。
- 高度可控：通过background-position和background-size，可以精确控制每个背景层的尺寸和位置。
- 响应式友好：更容易实现响应式布局，因为所有背景都绑定在同一个容器上。
实现步骤
我们将创建一个父容器，并为其定义三个背景层：一个装饰性图像、一个红色渐变（模拟红色块）和一个蓝色渐变（模拟蓝色块）。
-
HTML结构： 保持DOM结构简洁，只包含实际内容所需的div。
<div class="container"> <div> <!-- 第一个内容区域，例如产品介绍 --> <h2>产品亮点</h2> <p>我们提供创新技术，解决您的痛点。</p> </div> <div> <!-- 第二个内容区域，例如工作原理 --> <h2>工作原理</h2> <p>简单三步，轻松上手，提升效率。</p> </div> </div> -
CSS样式： 这是实现核心逻辑的部分。我们将所有背景样式应用于.container。
.container { /* 定义容器尺寸，这里使用视口单位使其响应式 */ width: 50vw; /* 容器宽度为视口宽度的50% */ height: 100vh; /* 容器高度为视口高度的100% */ /* 1. 定义背景图像层 */ /* 顺序很重要：最先列出的在最上面 */ background-image: url(https://i.sstatic.net/qtQZn.png), /* 波浪形图像 */ linear-gradient(red, red), /* 红色块 (使用渐变模拟纯色) */ linear-gradient(blue, blue); /* 蓝色块 (使用渐变模拟纯色) */ /* 2. 定义每个背景图像的重复方式 */ background-repeat: no-repeat; /* 所有背景都不重复 */ /* 3. 定义每个背景图像的尺寸 */ /* 顺序与 background-image 对应 */ background-size: 50% 100%, /* 波浪形图像：宽度为容器的50%，高度为容器的100% */ 100% 50%, /* 红色块：宽度100%，高度50% */ 100% 50%; /* 蓝色块：宽度100%，高度50% */ /* 4. 定义每个背景图像的定位 */ /* 顺序与 background-image 对应 */ background-position: right top, /* 波浪形图像：右侧顶部 */ left top, /* 红色块：左侧顶部 */ left bottom; /* 蓝色块：左侧底部 */ } /* 内部 div 的样式，确保它们占据容器的一半高度 */ .container > div { width: 100%; height: 50%; /* 每个内容区域占据容器高度的50% */ /* 可以添加内边距、文本颜色等样式 */ padding: 20px; box-sizing: border-box; /* 确保padding不增加总高度 */ color: white; /* 示例文字颜色 */ } /* 全局重置样式，可选 */ * { margin: 0; padding: 0; box-sizing: border-box; }
代码解释
- background-image: 这是一个逗号分隔的列表，定义了容器的所有背景层。注意顺序，第一个是图像，然后是红色渐变，最后是蓝色渐变。linear-gradient(red, red)是一个从红色到红色的渐变，实际上就是纯红色块。
- background-repeat: no-repeat: 应用于所有背景层，确保它们不会平铺。
-
background-size: 同样是一个逗号分隔的列表，对应background-image中的每个背景层。
- 50% 100%: 波浪形图像的宽度为容器的50%，高度为容器的100%。
- 100% 50%: 红色和蓝色块的宽度为容器的100%，高度为容器的50%。
-
background-position: 同样是逗号分隔的列表，对应background-image中的每个背景层。
- right top: 将波浪形图像定位到容器的右上方。
- left top: 将红色块定位到容器的左上方。
- left bottom: 将蓝色块定位到容器的左下方。
- .container > div: 这两个内部div负责承载实际内容。它们的高度被设置为父容器的50%，确保它们分别占据红色和蓝色背景块的区域。
完整示例代码
将上述HTML和CSS组合起来，一个完整的示例将如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>多背景图像布局</title>
<style>
/* 全局重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
/* 定义容器尺寸 */
width: 50vw;
height: 100vh;
/* 多背景图像定义 */
background-image:
url(https://i.sstatic.net/qtQZn.png), /* 波浪形图像 */
linear-gradient(red, red), /* 红色块 */
linear-gradient(blue, blue); /* 蓝色块 */
background-repeat: no-repeat; /* 所有背景不重复 */
background-size:
50% 100%, /* 波浪形图像尺寸 */
100% 50%, /* 红色块尺寸 */
100% 50%; /* 蓝色块尺寸 */
background-position:
right top, /* 波浪形图像定位 */
left top, /* 红色块定位 */
left bottom; /* 蓝色块定位 */
}
.container > div {
width: 100%;
height: 50%; /* 内容区域占据容器一半高度 */
padding: 20px;
color: white; /* 文本颜色 */
display: flex; /* 使内容居中或其他布局 */
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.container > div h2 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div>
<h2>产品介绍</h2>
<p>探索我们的创新产品，体验前所未有的便捷与高效。</p>
</div>
<div>
<h2>工作流程</h2>
<p>了解简单直观的工作流程，助您轻松驾驭复杂任务。</p>
</div>
</div>
</body>
</html>注意事项与最佳实践
- 背景图像顺序：在background-image属性中，第一个列出的图像会绘制在最上面，最后一个绘制在最下面。请根据视觉需求调整顺序。在本例中，波浪形图像位于红色和蓝色块之上。
- 图像准备：如果背景图像（如本例中的波浪形）顶部或底部有空白区域，可能需要预先裁剪，以确保它能从期望的位置开始显示，达到最佳视觉效果。
- 响应式设计：使用vw和vh（视口宽度和视口高度）单位可以使容器尺寸更具响应性。同时，内部div的高度设置为50%，也确保了它们能适应父容器的变化。
- linear-gradient妙用：linear-gradient(color1, color1)是创建纯色背景块的简洁方式，避免了使用额外的图片文件。
- 兼容性：多背景图像是CSS3的特性，现代浏览器都支持良好。
总结
通过利用CSS的background-image、background-position和background-size组合属性，我们可以优雅地实现复杂的背景布局，将装饰性图像和颜色块作为同一个容器的背景层进行管理。这种方法不仅避免了position: absolute可能带来的内容遮挡问题，还使得DOM结构更加简洁，并为响应式设计提供了更大的灵活性。掌握这一技术，将有助于创建更专业、更具视觉吸引力的网页布局。
