为什么 mask-image 属性在浏览器中不起作用？答案

【问题标题】：why mask-image property is not working in browsers?为什么 mask-image 属性在浏览器中不起作用？
【发布时间】：2020-11-15 15:07:00
【问题描述】：

我创建了一个网页。当我使用 VScode 编辑器的 Live Server 扩展 打开页面时，它按预期工作。但是当我用 Firefox、Chrome、Internet Explorer 正常打开同一个页面时，它看起来很糟糕。可能掩码图像属性无法正常工作，掩码图像的替代方法是什么。我已经尝试过 -webkit-mask-image。

这是我的 HTML 代码

<!DOCTYPE html>
<html lang="eng">
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="cover">
            <div id="mobile_background"></div>
            <div id="page_background"></div>
            <div id="page_background2"></div>
            <div id="container">
                <div id="round_image"></div>
                <div id="SIGN_IN"><u>SIGN IN</u></div>
                <form id="form_back">
                    <input type="text" id="text" class="round_edge"><br>
                    <input type="password" id="password" class="round_edge"><br>
                    <input type="submit" value="Continue" id="submit" class="round_edge">
                </form>
            </div>
        </div>
        <script type="text/JavaScript" src="jquery.js"></script>
        <script type="text/JavaScript" src="index.js"></script>
    </body>
</html>

CSS 代码

#cover{
    position: relative;
}
#mobile_background{
    background-image: url("./MobileBorder.svg");
    height: 35em;
    width: 18em;
    background-size: 100% 100%;
    position: absolute;
    left:50%;
    margin-left: -180px;
    transition: ease 0.5s;
}

#page_background{
    background-image: linear-gradient(rgb(105, 115, 251),rgb(214, 114, 253));
    height: 31.5em;
    width: 18em;
    position: absolute;
    left:50%;
    top:5em;
    margin-left: -100px;
    mask-image: url("./Layer 3.svg");
    /* background-color: black; */
    mask-size: 100% 100%;
    transition: ease 0.5s;
}

#page_background2{
    background-image: linear-gradient(rgba(105, 115, 251,0.1),rgba(226, 153, 255,0.3));
    height: 31.5em;
    width: 18em;
    position: absolute;
    left:50%;
    top:2em;
    margin-left: -65px;
    mask-image: url("./Layer 3.svg");
    -webkit-mask-image: url("./Layer 3.svg");
    /* background-color: black; */
    mask-size: 100% 100%;
    /* background-color: black; */
    transition: ease 0.5s;
}

#container{
    position: relative;
    height: 30em;
    width: 15em;
    left:50%;
    top:50px;
    margin-left: -30px;
    transition: ease 0.5s;
}

#SIGN_IN{
    position:absolute;
    font-size: 40px;
    top:6em;
    left: 50px;
    color: rgb(255, 255, 255);
}

#round_image{
    background-image: url("./big3.png");
    height: 70px;
    width: 70px;
    background-size: 100% 100%;
    position: absolute;
    top:8em;
    left: 5em;
    border-radius: 30px;

}

#form_back{
    position: absolute;
    top:20em;
    margin-left: 2em;
    display: flex;
    flex-direction: column;
}

.round_edge{
    border-radius: 20px;
    margin: 5px;
    padding: 6px;
    background-color: rgb(209, 174, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    justify-content: center;
}

在 Firefox 中的页面上使用 Live Server

普通火狐

【问题讨论】：

标签： css cross-browser

【解决方案1】：

我也有同样的问题。在 VSCode 中一切看起来都不错，但是当我在 VSCode 之外打开 html 文件时，没有显示我的蒙版图像。如果我使用“background-image: url(../img/firework.png);”，我可以看到图像。

    .list-0 {
    mask-image: url(../img/firework.png);
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: var(--color-five);
    background-size: cover;
    width: 160px;
    height: 160px;
    margin-bottom: 25px;
    border-radius: 50%;
}

【讨论】：

【解决方案2】：

发生这种行为是因为浏览器可能不支持 background-image:linear-gradient(...); 和 mask-image:URL() ....

【讨论】：

【解决方案3】：

尝试改变

background-image: url("./big3.png");

到

background-image: url(big3.png);

【讨论】：