CSS遮罩无法在Chrome(Webkit)上使用

问题描述

我有一个问题:我制作了一张带有某些图层的图片，并希望使用mask css属性对其进行遮罩.它可以在Firefox上正常运行，而在Chrome上甚至不能带有-webkit-前缀.

I have a problem: I made a picture with some layer and wanted to mask them with the mask css property. It works fine on Firefox, whereas on Chrome it doesn't even with the -webkit- prefixe.

这是代码，请注意在#plan-1上应用了蒙版

Here is the code, note the mask is applied on #plan-1

也许Chrome无法使用jpeg制作蒙版? :o

Maybe Chrome can't make a mask from a 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进行矢量化处理).

As WahhabB said, I made a vector based image out of the mask (by vectorise with illustrator/inskape).

不幸的是，它不起作用.

Unfortunately, It doesn't work.

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>

推荐答案

浏览器期望的蒙版与Photoshop/Illustrator蒙版不同，其中白色/黑色对应于显示/隐藏.相反，它应该是:黑色/透明对应于显示/隐藏.

The mask that the browser expects is not like a Photoshop/Illustrator mask where the white/black corresponds to show/hide. Instead it should be: black/transparent corresponds to show/hide.

以下是可与您的蒙版一起使用的CSS(我将您的蒙版转换为PNG以支持透明性，然后使白色部分透明):

Here is the CSS that gets it working with your mask (I turned your mask into a PNG to support transparency, then made the white part transparent):

#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蒙版图像也已附加.

Also note that your mask is much bigger than the masked div's width and height so you have to also specify mask-size/-webkit-mask-size. My corrected PNG mask image is also attached.

您还可以在提到的Mozilla文档页面中看到他们使用线性渐变作为蒙版，并且此渐变具有两个停止点:黑色和透明:linear-gradient(rgba(0, 0, 0, 1.0), transparent);

You can also see in the same Mozilla doc page that you mentioned that they used a linear-gradient as a mask and this gradient has two stops: black and transparent: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

这篇关于CSS遮罩无法在Chrome(Webkit)上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！