具有线性渐变的CSS遮罩图像在Edge中不起作用 [英] CSS mask-image with linear gradient not working in Edge

问题描述

Caniuse.com说，Edge完全支持蒙版图像，但是以下代码对我来说除Edge以外的所有浏览器都适用.

Caniuse.com says that Edge has full support for mask-image but the following code is working in all browsers for me except 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中进行了测试，没有任何问题.

This should produce a simple red box which is red a the top and transparent at the bottom. Tested in Chrome and Firefox with no problems.

那么，它是否仅与线性渐变不兼容?我已经在网上搜寻了，但是找不到答案.

So, is it just incompatible with linear-gradient? I have scoured the web but can't find an answer.

推荐答案

这是我的测试代码.

    #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上运行时，其底部将没有透明层.

I've found that if I do not add -webkit-mask-image, when running on Chrome, there will be no transparent at the bottom.

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

But it always works well on Edge.

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

My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.

这篇关于具有线性渐变的CSS遮罩图像在Edge中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！