本文旨在解决如何为一个已经包含图片的 div 元素设置背景图片的问题。通过结合 CSS 的 `background-image`、`background-color`、`background-size` 和 `background-position` 属性，可以实现背景图片与 div 内图片的叠加显示，并控制背景图片的尺寸和位置。此外，本文还介绍了如何使用伪元素 `:before` 实现多层背景图片的效果，以及控制图片的层叠顺序。
在网页设计中，为一个 div 元素设置背景图片是很常见的需求。但当 div 元素内部已经包含图片时，如何才能让背景图片正确显示，并且可以控制其大小和位置呢？ 本文将详细介绍如何使用 CSS 属性来实现这一目标，并提供多种实现方案，满足不同的设计需求。
方案一：使用 background-image 和相关属性
最基础的方法是直接使用 CSS 的 background-image 属性来设置背景图片。同时，为了更好地控制背景图片，还需要结合使用 background-color、background-size 和 background-position 属性。
代码示例：
.div1 {
background-color: blue; /* 设置背景颜色，作为背景图片的补充 */
background-image: url(https://thumbs.dreamstime.com/b/forrest-27720334.jpg); /* 设置背景图片 */
background-size: 50%; /* 设置背景图片的大小，这里设置为 50% */
background-position: center; /* 设置背景图片的位置，这里设置为居中 */
background-repeat: no-repeat; /* 设置背景图片不重复 */
width: 400px; /* 设置 div 的宽度 */
height: 300px; /* 设置 div 的高度 */
}<div class="div1"> </div>
代码解释：
- background-color: 设置背景颜色。当背景图片未完全覆盖 div 区域时，背景颜色会显示出来。
- background-image: 设置背景图片的 URL。
- background-size: 控制背景图片的大小。可以使用百分比、像素值或 cover、contain 等关键字。
- background-position: 控制背景图片的位置。可以使用 top、bottom、left、right、center 等关键字，也可以使用像素值或百分比。
- background-repeat: 控制背景图片是否重复。通常设置为 no-repeat，以避免图片重复平铺。
注意事项：
- 确保背景图片的 URL 是正确的。
- 根据实际需求调整 background-size 和 background-position 的值，以达到最佳的显示效果。
- background-color 可以设置为透明色，例如 transparent，如果不需要显示背景颜色。
方案二：使用伪元素 :before 实现多层背景图片
如果需要实现多层背景图片的效果，可以使用 CSS 的伪元素 :before。通过将其中一张图片设置为 div 的背景图片，另一张图片设置为 :before 伪元素的背景图片，并调整它们的 z-index 值，可以控制图片的层叠顺序。
代码示例：
.div1 {
background-image: url(https://www.realtree.com/sites/default/files/styles/site_xl/public/content/inserts/2022/imagebybarriebird-ducklings.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(https://thumbs.dreamstime.com/b/forrest-27720334.jpg);
background-size: cover;
/* to set this image layer behind the duck one */
z-index: -1;
}<div class="div1"> Example content text </div>
代码解释：
- position: relative: 将 div 元素设置为相对定位，以便 :before 伪元素可以相对于它进行定位。
- content: "": :before 伪元素必须设置 content 属性，即使内容为空。
- position: absolute: 将 :before 伪元素设置为绝对定位，使其可以覆盖整个 div 元素。
- z-index: -1: 将 :before 伪元素的 z-index 设置为 -1，使其位于 div 元素的下方，从而实现背景图片的效果。
- display: flex, align-items: center, justify-content: center: 将div内部的文字居中显示。
注意事项：
- 确保 div 元素设置了 position: relative。
- :before 伪元素的 width 和 height 应该设置为 100%，以覆盖整个 div 元素。
- 根据需要调整两个图片的 z-index 值，以控制它们的层叠顺序。
总结
通过结合使用 CSS 的 background-image、background-color、background-size、background-position 属性和伪元素 :before，可以灵活地为一个包含图片的 div 元素设置背景图片，并控制其大小、位置和层叠顺序。在实际应用中，可以根据具体的设计需求选择合适的方案，并进行相应的调整。
