如何使用 CSS Mask 实现鼠标悬停时显示隐藏图片的椭圆区域？

图片重叠，区域显露底图

问题：如何将两张图片叠放，在鼠标移动到指定区域时，露出底层图片的内容？

两张图片示例：

• 第一图：https://example.com/image1.png
• 第二图：https://example.com/image2.png

预期效果：

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

解决方案：

1. 使用 css mask 属性：

.container {
  mask-image: url(mask-image.png);
}

• mask-image 指定遮罩图片，定义了需要显示第二张图片的区域。

2. 调整遮罩图片：

创建遮罩图片（mask-image.png）并编辑其透明度，以设置椭圆区域。

3. 设置 overflow：hidden；

.container {
  overflow: hidden;
}

• 隐藏遮罩图片之外的内容，确保只显示指定的椭圆区域。

4. 添加交互性：

.container:hover {
  mask-image: none;
}

• 将 mask-image 设置为 none，在鼠标悬停时显示底层图片。

演示：

可以根据以下 demo 代码进行修改调整，包括椭圆大小、渐变位置等。

demo 链接：

[https://codepen.io/pen/xxx](演示代码链接)

注意：

此解决方案基于 css mask 属性，兼容性有限，不支持较早的浏览器。

以上就是如何使用 CSS Mask 实现鼠标悬停时显示隐藏图片的椭圆区域？的详细内容，更多请关注其它相关文章！