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

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《如何通过 CSS 实现鼠标移动时，指定区域显示下层图片？ 》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

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

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

图片：

• 图片 1：
• 图片 2：

期望效果：

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

解决方案：

<!-- HTML -->
<div id="container">
  <img src="image1.png" id="image1">
  <img src="image2.png" id="image2" class="hidden">
</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 实现鼠标移动时，指定区域显示下层图片？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！