Question

我有一个问题：我用一些图层制作了一张图片，并希望用掩码css属性来掩盖它们。它在Firefox上工作正常，而在Chrome上它甚至没有使用-webkit- prefixe。

以下是代码，请注意掩码应用于＃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指出的那样，最好从最简单的例子开始。

Css面具无法在Chrome上运行（Webkit）

1 个答案: