如何通过 CSS 实现鼠标移动时，指定区域显示下层图片？

双图重叠，鼠标移动时指定区域显示下层图片

问题：如何叠加两张图片，使得鼠标移动时，指定区域跟踪鼠标并显示下层图片内容？

图片：

• 图片 1：
• 图片 2：

期望效果：

鼠标移动时，椭圆区域显示第二张图片的内容。

解决方案：

<!-- HTML -->
<div id="container">
  @@##@@
  @@##@@
</div>

/* CSS */
#container {
  position: relative;
  width: 300px;
  height: 300px;
}

#image1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("mask.png");
  mask-image: url("mask.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#container:hover #image2 {
  display: block;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 椭圆遮罩图片 */
.mask {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

提示：

• 请确保 mask.png 是一个椭圆形状的透明 PNG 文件。
• 根据需要调整 mask-size 和 -webkit-mask-position 以更改椭圆的大小和位置。

以上就是如何通过 CSS 实现鼠标移动时，指定区域显示下层图片？的详细内容，更多请关注其它相关文章！