如何在div中同时设置背景图片和内容图片？-html教程-PHP中文网

如何在div中同时设置背景图片和内容图片？

聖光之護

发布： 2025-10-29 12:26:01

原创

457人浏览过

如何在div中同时设置背景图片和内容图片？

本文旨在解决如何在HTML的div元素中同时设置背景图片和内容图片的问题。通过CSS的`background-image`、`background-size`、`background-position`和`background-repeat`属性，以及伪元素`::before`，可以实现背景图片和内容图片的叠加效果，并控制它们的大小、位置和层叠顺序，从而满足不同的布局需求。

在网页设计中，经常需要在div元素中同时展示背景图片和内容图片。这可以通过CSS的多种属性来实现，关键在于理解background-image、background-size、background-position、background-repeat等属性的用法，以及如何利用伪元素实现更复杂的层叠效果。

使用background-image设置背景图片

background-image属性用于设置元素的背景图片。可以在CSS样式中直接指定图片的URL。

.div1 {
  background-image: url("your-image-url.jpg");
}

登录后复制

上述代码会将your-image-url.jpg设置为div1类的元素的背景图片。

控制背景图片的大小和位置

仅仅设置background-image可能无法满足需求，因为图片可能过大或过小，或者不在期望的位置。这时，可以使用background-size和background-position属性进行调整。

background-size: 用于控制背景图片的大小。常用的值包括：
- cover: 缩放图片以完全覆盖元素，可能会裁剪图片。
- contain: 缩放图片以完全适应元素，可能会留白。
- 50%: 将图片缩放到元素宽度的50%。
- auto: 保持图片原始大小。
background-position: 用于控制背景图片的位置。常用的值包括：
- center: 将图片居中显示。
- top, bottom, left, right: 将图片定位到元素的顶部、底部、左侧、右侧。
- x% y%: 使用百分比来精确控制图片的位置。

.div1 {
  background-image: url("your-image-url.jpg");
  background-size: cover; /* 或者 contain, 50% 等 */
  background-position: center;
}

登录后复制

防止背景图片重复

默认情况下，背景图片会在元素中重复平铺。如果希望只显示一张背景图片，可以使用background-repeat属性。

稿定抠图

AI自动消除图片背景

查看详情

background-repeat: 用于控制背景图片的重复方式。常用的值包括：
- no-repeat: 禁止重复。
- repeat: 在水平和垂直方向上重复。
- repeat-x: 在水平方向上重复。
- repeat-y: 在垂直方向上重复。

.div1 {
  background-image: url("your-image-url.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

登录后复制

背景颜色与背景图片叠加

可以通过同时设置background-color和background-image来实现背景颜色与背景图片的叠加效果。background-color会在背景图片下方显示。

.div1 {
  background-color: blue;
  background-image: url("your-image-url.jpg");
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;

  width: 400px;
  height: 300px;
}

登录后复制

使用伪元素实现多图层叠加

如果需要在背景图片之上再叠加一层图片或内容，可以使用CSS伪元素::before或::after。

<div class="div1">
  Example content text
</div>

登录后复制

.div1 {
  background-image: url("duck-image.jpg");
  width: 400px;
  height: 300px;
  position: relative;
  color: white;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  /*to center the text */
  display: flex;
  align-items: center;
  justify-content: center;
}

.div1::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("forest-image.jpg");
  background-size: cover;
  /*to set this image layer behind the duck one */
  z-index: -1;
}

登录后复制

在这个例子中，::before伪元素被用来添加另一张背景图片，并使用z-index: -1将其放置在div的内容和background-image的后面。position: relative 和 position: absolute 的组合使用是关键，保证伪元素相对于 div 进行定位。