css在图片下再加图片怎么加

CSS在图片下再加图片怎么加？这是一个常见的问题。下面我们来详细介绍一下。

img {
    max-width: 100%;
}
.img-wrapper {
    position: relative;
}
.overlay-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
    

首先，我们需要让原始的图片具有良好的响应式效果。这里使用了max-width: 100%; 来控制图片宽度，以适应不同屏幕大小。

接下来，我们需要为图片添加一个父容器，这里命名为.img-wrapper。将其position属性设为relative，以便内部的其他元素都可以相对于它定位。接下来，我们可以在.img-wrapper中添加覆盖在原始图片下面的第二个图片，这里命名为overlay-img。我们通过把其position属性设置为absolute，然后将bottom属性设为0，来控制其相对于img-wrapper的定位。为了让其水平居中，我们设置了left为50%。最后，我们通过transform: translateX(-50%); 来将其居中。

最后，我们需要调整新图片在层级中的位置。我们可以通过z-index属性来设置其比原始图片高，使其覆盖在上层。我们可以将其设置为1。

现在，我们已经成功地利用CSS在图片下添加了另一张图片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！