CSS背景图像：为div设置与内容共存的多层背景-html教程-PHP中文网

CSS背景图像：为div设置与内容共存的多层背景

霞舞

发布： 2025-10-29 10:43:00

原创

612人浏览过

本教程详细介绍了如何在html `div`元素中设置和管理背景图像，包括基础的单背景图像配置以及更高级的多层背景图像实现。文章将通过css属性如`background-image`、`background-size`、`background-position`和`z-index`，结合`::before`伪元素，演示如何在包含文本或` CSS背景图像：为div设置与内容共存的多层背景 `标签等内容时，灵活地控制背景图像的显示效果和层级关系，确保内容与背景和谐共存。

在网页设计中，为div元素设置背景图像是一种常见的布局和美化手段。然而，当div内部已经包含其他内容（如文本、<img>标签或其他子元素）时，如何优雅地处理背景图像，甚至实现多层背景效果，就显得尤为重要。本教程将深入探讨这些场景下的CSS解决方案。

一、基础背景图像设置

为div设置背景图像是最基本的操作。通过background-image属性指定图像源，并结合其他background系列属性来控制图像的显示方式。

核心CSS属性：

background-image: 指定背景图像的URL。
background-color: 当背景图像加载失败或部分区域未被图像覆盖时，显示纯色背景。
background-size: 控制背景图像的大小，可以是像素值、百分比、cover（覆盖整个元素）或contain（包含在元素内）。
background-position: 控制背景图像的位置，可以是关键词（如center、top、bottom等）、像素值或百分比。
background-repeat: 控制背景图像是否重复以及如何重复（如no-repeat、repeat-x、repeat-y）。

示例代码：

立即学习“前端免费学习笔记（深入）”；

假设我们有一个简单的div，想要为其设置一个居中、不重复且大小为50%的背景图像，并以蓝色作为备用背景色。

HTML:

<div class="div1">
  <!-- 此处可以放置文本或其他内容，但不会被背景图像覆盖 -->
</div>

登录后复制

CSS:

.div1 {
  background-color: blue; /* 备用背景色 */
  background-image: url('https://thumbs.dreamstime.com/b/forrest-27720334.jpg'); /* 背景图像URL */
  background-size: 50%; /* 背景图像大小为div的50% */
  background-position: center; /* 背景图像居中显示 */
  background-repeat: no-repeat; /* 背景图像不重复 */

  width: 400px; /* 示例宽度 */
  height: 300px; /* 示例高度 */
  border: 1px solid #ccc; /* 方便观察边界 */
}

登录后复制

在这个例子中，即使div1内部有内容，背景图像也会在其下方显示，且内容会覆盖在背景图像之上。background-size: 50%允许背景图像小于div本身，而background-color则填充了未被图像覆盖的区域。

二、在包含内容的div中分层背景图像

当div内部已经存在一个<img>标签作为主要视觉元素，或者有大量文本内容，而我们又想在其背后添加一个独立的背景图像时，传统的background-image可能无法满足需求。因为<img>标签本身就是内容，会直接占据文档流空间。此时，我们可以利用CSS的::before或::after伪元素来创建额外的层，实现更复杂的背景分层效果。

Cutout.Pro抠图

AI批量抠图去背景

查看详情

实现原理：

将父div设置为position: relative，为其内部的绝对定位元素提供参考。
使用::before伪元素作为独立的背景层。
将::before伪元素设置为position: absolute，并使其覆盖整个父div。
为::before伪元素设置background-image及其他相关背景属性。
通过z-index: -1将::before伪元素置于父div的所有内容（包括文本、<img>标签等）之后。

示例代码：

立即学习“前端免费学习笔记（深入）”；

假设我们有一个div，其中包含一些文本内容，我们希望在这些文本后面显示一个背景图像，同时在最底层再显示另一个背景图像。

HTML:

<div class="div1">
  Example content text
  <!-- 也可以是 <img src="your-image.jpg" alt="Content Image"> -->
</div>

登录后复制

CSS:

.div1 {
  width: 400px;
  height: 300px;
  position: relative; /* 关键：为伪元素提供定位上下文 */
  color: white; /* 示例文本颜色，以便在背景上可见 */
  display: flex; /* 示例：居中文本 */
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc; /* 方便观察边界 */

  /* 第一层背景图像（内容层下方） */
  background-image: url('https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.jpg');
  background-size: 50%; /* 图像大小 */
  background-repeat: no-repeat;
  background-position: center;
}

.div1::before {
  content: ""; /* 伪元素必须有content属性 */
  position: absolute; /* 关键：绝对定位 */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('https://thumbs.dreamstime.com/b/forrest-27720334.jpg'); /* 第二层背景图像 */
  background-size: cover; /* 覆盖整个伪元素区域 */
  z-index: -1; /* 关键：将伪元素置于所有内容之后 */
}

登录后复制

在这个例子中：

.div1本身设置了一个鸭子图像作为背景，它位于“Example content text”文本的下方。
.div1::before伪元素则创建了另一个完全覆盖.div1的层，并设置了森林图像作为背景。
z-index: -1确保了森林图像（::before）在鸭子图像（.div1的背景）和文本内容（.div1的实际内容）的最底层。
如果div1内部包含的是一个<img>标签，该<img>标签也会被视为div1的内容，因此::before层依然会位于其下方。

三、关键注意事项

性能优化： 使用大尺寸背景图像可能会影响页面加载性能。建议对图像进行优化，压缩大小，并考虑使用WebP等现代图像格式。
响应式设计： background-size: cover和background-size: contain对于响应式背景图像非常有用。对于更精细的控制，可以使用媒体查询（@media）根据屏幕尺寸调整background-size和background-position。
可访问性： 如果背景图像承载了重要信息，应确保这些信息也能通过其他方式（如文本、alt属性）传达给屏幕阅读器用户。避免将重要文本置于对比度不足的背景图像上。
多背景图像： CSS3允许直接在background-image属性中指定多个背景图像，用逗号分隔。这些图像会按照列表顺序堆叠，第一个图像在最上层。例如：background-image: url(image1.png), url(image2.png);。但这种方法对于需要将背景置于内容之下的场景不如::before伪元素灵活。
内容与背景分离： 始终记住，background-image是装饰性的。如果图像是页面内容的一部分（例如产品图片、用户头像），应使用<img>标签，而不是背景图像。