[分享]css中怎么将图片和图片覆盖

CSS中常用的一种技巧是将图片与另一张图片叠加覆盖，这可以实现很多有趣的效果，例如卡片翻转，拼图游戏等等。下面我们就来介绍一下如何使用CSS实现图片覆盖效果。.image { : relative; ...

CSS中常用的一种技巧是将图片与另一张图片叠加覆盖，这可以实现很多有趣的效果，例如卡片翻转，拼图游戏等等。下面我们就来介绍一下如何使用CSS实现图片覆盖效果。

.image {
    position: relative; /* 将图片设置为相对定位 */
}

.overlay-image {
    position: absolute; /* 将叠加的图片设置为绝对定位，相对于父元素 .image */
    top: 0;
    left: 0;
    z-index: 1; /* 将叠加的图片放到最上层 */
} 

在上面的代码中，我们先将 .image 类设置为相对定位，这样它的子元素都可以使用绝对定位相对于它自身进行定位。接下来我们创建一个新的类 .overlay-image 来控制叠加的图片。设置它的定位为绝对定位，并将 top 和 left 属性设置为 0，表示把图片放在 .image 的左上角。同时将它的 z-index 设置为 1，就可以让它显示在 .image 的上层。

这时候我们就可以在 HTML 中添加两张图片，一张作为底图，一张作为叠加图，如下所示：

<div class="image">
  <img src="base-image.jpg">
  <img src="overlay-image.png" class="overlay-image">
</div> 

这样就可以将叠加图覆盖在底图上面了。需要注意的是，叠加的图片需要设置透明度或者透明 PNG 格式，这样才能看到底图。另外，通过控制叠加图片的大小和位置，还可以实现很多有趣的效果，例如各种形状的遮罩等等。