时间戳

首页 > 解决方案 > CSS 图像掩码未显示在边缘，但在 Firefox 和 Chrome 中运行良好

html - CSS 图像掩码未显示在边缘，但在 Firefox 和 Chrome 中运行良好

问题描述

我有一个带有图像蒙版的滑块，在 Firefox 和 Chrome 中运行良好（附加）

在此处输入图像描述 它的 CSS 非常简单：

position: absolute;
bottom: -150px;
width: 800px;
left: 50%;
transform: translateX(-50%);
z-index: 5;

-webkit-mask-image: url(assets/svg/mask.svg);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
mask-image: url(assets/svg/mask.svg);
mask-size: 100%;
mask-repeat: no-repeat;

但是当我在 Edge 中打开页面时，我根本看不到该元素。我尝试将掩码切换为 PNG 文件，但没有成功。我认为可能是滑块错误，但即使我将 div 的内容切换为空白的黑色元素（也适用于 Firefox 和 chrome），我仍然没有在 Edge 中得到任何结果。

如果我划掉“mask-image”属性，滑块会出现在屏幕上并且工作正常。

这是演示： http ://box5602.temp.domains/~ednahous/

我有另一个网站，在视频顶部有一个图像遮罩，它在 Edge 中运行良好......所以我真的不知道是什么导致了这个问题。

标签： htmlcssimagecss-mask

解决方案

推荐阅读