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);
}

并且有效。但是用你的替换 url:

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

你会发现它不起作用。

正如 sheriffderek 所指出的，最好从最简单的示例开始。