CSS mask-image with linear gradient not working in 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));

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.

回答1:

Here is my testing code.

    #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>

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

But it always works well on Edge.

My version is Microsoft Edge 44.17763.1.0,Microsoft EdgeHTML 18.17763.

回答2:

According to Can I Use, mask-image is supported in Edge 18, but is hidden behind a flag in lower versions.

来源：https://stackoverflow.com/questions/54844187/css-mask-image-with-linear-gradient-not-working-in-edge