CSS 掩码在 Chrome (Webkit) 上不起作用

Question

我有一个问题：我制作了一张带有某些图层的图片，并想使用 mask css 属性来遮盖它们。它在 Firefox 上运行良好，而在 Chrome 上甚至没有 -webkit- 前缀。

这是代码，请注意掩码应用于#plan-1

也许 Chrome 无法从 jpeg 制作蒙版？:o

body{
            margin: 0;
            background-color:black;
            transform: translateZ(0);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            }
section{
            display: block;
            background-position: center;
            height: 100%;
            width: 100%;
            position: absolute;
            margin: auto;

       }
       
#plan-1{
    mask-image: url('http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.jpg'); /*Option de Masque*/
    mask-position:center;
    mask-mode: luminance;
    mask-size: contain;

    -webkit-mask-image: url('http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.jpg'); /*Webkit*/
    -webkit-mask-position:center;
    -webkit-mask-size: contain;
    -webkit-mask-type: luminance;


    background:url("http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/03.jpg") no-repeat center;
    background-size: contain;

    z-index: 15;
}

#plan-2{
    background-color:red;
    background-size: contain;

    z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="align">
<section id="plan-1"></section>
<section id="plan-2"></section>
</div>

编辑

正如 WahhabB 所说，我用蒙版制作了一个基于矢量的图像（通过 illustrator/inskape 进行矢量化）。

不幸的是，它不起作用。

body{
            margin: 0;
            background-color:black;
            transform: translateZ(0);
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            }
section{
            display: block;
            background-position: center;
            height: 100%;
            width: 100%;
            position: absolute;
            margin: auto;

       }
       
#plan-1{
    mask-image: url('http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.svg'); /*Option de Masque*/
    mask-position:center;
    mask-mode: luminance;
    mask-size: contain;

    -webkit-mask-image: url('http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.svg'); /*Webkit*/
    -webkit-mask-position:center;
    -webkit-mask-size: contain;
    -webkit-mask-type: luminance;


    background:url("http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/03.jpg") no-repeat center;
    background-size: contain;

    z-index: 15;
}

#plan-2{
    background-color:red;
    background-size: contain;

    z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="align">
<section id="plan-1"></section>
<section id="plan-2"></section>
</div>

Answer 1

目前，此功能在 Chrome（版本 58.0.3029.110（64 位））中不起作用。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image#Browser_compatibility的示例中看到这一点。在 FireFox 中，绿色看起来像一颗星星。在 Chrome 上，它只是一个盒子，尽管如果您使用 -webkit 前缀它确实可以工作。但是，将该 .svg 更改为 .jpg 会导致失败。以他们为例：

<div id="masked"></div>

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

它有效。但将网址替换为您的网址：

http://felixjely.fr/projet/DGN1/film-couloir/img/piranese/mask-01.jpg

你会发现它不起作用。

正如 Sheriffderek 指出的那样，最好从最简单的示例开始。

Answer 2

你可以试试这个

-webkit-mask-image: url(YOUR-IMAGE);