具有线性渐变的 CSS 蒙版图像在 Edge 中不起作用答案

【问题标题】：CSS mask-image with linear gradient not working in Edge具有线性渐变的 CSS 蒙版图像在 Edge 中不起作用
【发布时间】：2019-02-26 16:09:17
【问题描述】：

Caniuse.com 说 Edge 完全支持 mask-image，但以下代码适用于除 Edge 之外的所有浏览器。

width: 200px;
height: 200px;
background: red;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

这应该会产生一个简单的红色盒子，顶部是红色的，底部是透明的。在 Chrome 和 Firefox 中测试没有问题。

那么，它只是与线性梯度不兼容吗？我搜索了网络，但找不到答案。

【问题讨论】：

你可以用简单的渐变作为背景，不用蒙版
感谢@TemaniAfif，但我已经简化了我的用例以在此处发布。实际上，该 div 将包含需要屏蔽的 html 内容，而不仅仅是纯色。
您可以发布您的真实用例，我们可能会找到一些解决方法；）

标签： css microsoft-edge

【解决方案1】：

这是我的测试代码。

    #masked {
        width: 200px;
        height: 200px;
        background: red;
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    }
<div id="masked"></div>

我发现如果不加-webkit-mask-image，在Chrome上运行的时候，底部不会有透明的。

但它总是在 Edge 上运行良好。

我的版本是 Microsoft Edge 44.17763.1.0，Microsoft EdgeHTML 18.17763。

【讨论】：

感谢珍妮弗。您是如何获得 Edge 18 版的？我已经完成了 Windows 10 的所有升级，但仍然获得了版本 17。
Mine Edge 会随着系统的更新而更新。也许你可以去系统设置检查更新。

【解决方案2】：

根据Can I Use，Edge 18 支持mask-image，但在较低版本中隐藏在标志后面。

【讨论】：

啊，谢谢。我以为我有最新版本（我从未拒绝任何更新），但它一定比我想象的要新。
啊，有点快将其标记为正确答案，抱歉。我在 Edge 17 中设置了“CSS Masking”标志，但不幸的是它仍然不起作用。整个 div 都是红色的。
@jonhobbs 它似乎无法正常工作。对我来说，当我尝试使用 mask-image 时，Edge 一直在崩溃。
是的，开发工具每次都会为我崩溃，但浏览器仍然可以工作。到我的项目启动时，Edge 可能已经正式切换到 chromium 渲染引擎，但我仍然需要修复它:(