css怎么在图片上放图片

前言

在制作网页时经常需要将图片嵌套在图片上进行布局，下面将介绍如何使用 CSS 实现这一操作。

使用 background-image 属性

介绍

可以使用 CSS 的 background-image 属性将一张图片嵌套在另一张图片上。background-image 属性用于设置一个元素的背景图像。

实现

代码如下：

div {
    background-image: url(girl.png);
    background-repeat: no-repeat;
    background-position: center;
}
span {
    background-image: url(boy.png);
    background-repeat: no-repeat;
    background-position: center;
}

上述代码中，div 和 span 元素都嵌套了一张图片，girl.png 和 boy.png。使用 background-image 属性设置背景图片，background-repeat 设置不平铺，background-position 设置居中显示。在 HTML 中使用 div 和 span 元素再放置其他图片即可。

注意事项

需要使用相对路径或绝对路径引用图片

嵌套的图片在父元素中的位置可以通过 background-position 属性调整

若嵌套图片位置不正确，可能导致视觉效果不佳

使用多个 div 容器

介绍

使用多个 div 容器进行布局也是一种解决方法。通过给每个 div 设置宽高及背景图片，可以实现多张图片嵌套的效果。

实现

代码如下：

.outer {
  position: relative;
  width: 500px;
  height: 500px;
}
.inner1, .inner2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.inner1 {
  background-image: url(girl.png);
}
.inner2 {
  background-image: url(boy.png);
}

上述代码中，outer 容器是最外层的 div，设置了宽高为 500px。inner1 和 inner2 容器都是绝对定位的，position 属性设置为 absolute。两个容器利用相同的位置进行叠放，background-repeat 设置为 no-repeat，background-position 设置为 center 均居中显示。

注意事项

在多层嵌套时，需要预设好每个 div 容器的宽高与位置

使用相对定位与绝对定位完成布局时，需要考虑每个 div 容器之间的相对位置关系

在嵌套图片的布局中，与使用 background-image 属性相比，可能需要设置更多的样式来达到视觉效果

使用 ::before, ::after 伪元素

介绍

使用 ::before, ::after 伪元素可以在元素内部指定位置添加子元素，同时利用伪元素嵌套图片，完成多层嵌套的效果。

实现

代码如下：

div {
    position: relative;
    width: 500px;
    height: 500px;
    background: url(girl.png);
    background-repeat: no-repeat;
    background-position: center;
}
div::before {
    content: "";
    display: block;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: url(boy.png);
    background-repeat: no-repeat;
    background-position: center;
}

上述代码中，使用了一个 div 元素作为最外层容器，给该元素设置了宽高和背景图片。再使用 ::before 伪元素插入一个子元素，使用 position 的 absolute 值设置其位置，content 为空使其在前端不显示。background 设置为 boy.png 完成子元素嵌套。

注意事项

使用 ::before, ::after 伪元素时需要指定 content 属性

伪元素占用的空间不会影响父元素的布局

使用伪元素完成布局可以有效避免多层嵌套元素，使 HTML 结构更加简单

总结

通过使用 CSS 的 background-image 属性、多个 div 容器以及 ::before, ::after 伪元素，我们可以实现图片上嵌套图片的效果。三种方法各有优缺点，根据不同的需求选择不同的方法。在使用这些方法时，需要重视细节，特别是在多层嵌套时，需要考虑每个元素之间的相对位置关系。以上是关于 CSS 在图片上放图片的详细介绍。