不在Chrome上工作的Css掩码(Webkit)

Question

我有一个问题:我用一些图层做了一张图片，并想用掩码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说的，我用面具做了一个基于矢量的图像(用插画/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位))中是不起作用的。您可以在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

浏览器所期望的掩码不像Photoshop/Illustrator掩码，其中白色/黑色对应于显示/隐藏。相反，它应该是:黑色/透明对应于显示/隐藏。

下面是让它与您的掩码一起工作的CSS (为了支持透明性，我将您的掩码转换为PNG，然后使白色部分透明)：

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://i.stack.imgur.com/yl5tc.png);
  -webkit-mask-size: 100px 100px;
  mask-image: url(https://i.stack.imgur.com/yl5tc.png);
  mask-size: 100px 100px;
}

还请注意，您的掩码比蒙面div的宽度和高度要大得多，所以您还必须指定mask-size/-webkit-mask-size。我校正的PNG面具图像也附呈。

您还可以在您提到的Mozilla doc页面中看到，它们使用线性梯度作为掩码，这种渐变有两个停止:黑色和透明：linear-gradient(rgba(0, 0, 0, 1.0), transparent);。

​

Answer 3

你可以试试这个

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