Chrome 未始终如一地渲染 CSS 蒙版图像

Chrome not rendering CSS mask-image consistently

我 运行 遇到了一个奇怪的问题,即 chrome 没有始终如一地应用一些带有蒙版的图像。 (一张图片按预期工作,而另一张图片没有并呈现整个 div)。两个图像在 Firefox 中都按预期工作(当删除 webkit 前缀时)。

在下面的代码笔中,它以 base 64 编码的图像(一只猫)开始,它正确地掩盖了 div,3 秒后设置的超时将掩码更改为心脏图像。此掩码未按预期应用。为了证明它是一个有效的图像,我在 3 秒后(成功)将图像应用为背景图像。

let heartUri = 'url(data:image/png;base64,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)'

  setTimeout(() => {
      document.getElementById('luminance-target').style['-webkit-mask-image'] = heartUri
  }, 3000)
  setTimeout(() => {
       document.getElementById('luminance-target').style['background-image'] = heartUri
  }, 6000)
 
#luminance-target {
  display: block;
  background-color: yellow;
  -webkit-mask-image: url('data:image/png;base64,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');
  -webkit-mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 300px;
  height: 300px;
}
  <div id="luminance-target">
    <h2>Luminance Mask</h2>
  </div>

https://codepen.io/anon/pen/PXYgNg

这是预期的行为吗?

Chrome 对 CSS 掩码的实现是 still incomplete。现阶段不支持luminance模式:

默认模式为alpha。由于您的猫图像具有透明背景,因此效果很好。另一方面,您的心脏图像不会。

下面的演示从您的猫图像开始,然后过渡到您原来的心脏,然后在同一个心脏上完成,但应用了透明度。

为了避免痛苦的数据 URL,我为图像添加了 imgur 链接。

猫:https://i.stack.imgur.com/rnXYp.png
老心:https://i.stack.imgur.com/nbLhD.png
新心:https://i.stack.imgur.com/JnFrp.png

let heartUri = 'url(\'https://i.stack.imgur.com/nbLhD.png\')';
let newHeartUri = 'url(\'https://i.stack.imgur.com/JnFrp.png\')'

 setTimeout(() => {
     document.getElementById('luminance-target').style['-webkit-mask-image'] = heartUri;
 }, 3000);

 setTimeout(() => {
     document.getElementById('luminance-target').style['-webkit-mask-image'] = newHeartUri;
 }, 6000);
 
#luminance-target {
  display: block;
  background-color: yellow;
  -webkit-mask-image: url('https://i.stack.imgur.com/rnXYp.png');
  -webkit-mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  width: 300px;
  height: 300px;
}
<div id="luminance-target">
    <h2>Luminance Mask</h2>
</div>