css中图片覆盖另一图片上

在网页开发中，我们经常需要将一个图片覆盖在另一个图片的上方。这种效果可以通过CSS的属性实现。

CSS中有个非常重要的属性叫做z-index，它用于控制元素的堆叠顺序，也就是元素在页面中的位置。其中z表示其在三维空间中的高度轴，值越大则表示元素越靠上。

如果我们想将一个图片覆盖在另外一个图片上方，我们需要保证在HTML中，底层的图片被置于上层的图片之前。然后使用z-index属性为上层的图片指定一个比下层图片更大的值，就可以实现覆盖的效果。

/*HTML代码片段*/
<div>
    <img src="bg.png" class="bg" alt="background">
    <img src="fg.png" class="fg" alt="foreground">
</div>

/*CSS代码片段*/
.bg {
    width: 100%;
    z-index: 1;
}

.fg {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

上面的代码将一个图片作为背景图片，并在上方放置了另一张图片。由于背景图片默认处于底层，因此我们将其z-index属性设置为1，上层的图片z-index属性设置为2，就可以实现覆盖的效果。

需要注意的是，上层图片需要使用定位属性（如position: absolute;）来设置其位置。