Question

似乎Chrome当前存在mask-size的问题，它会强制将遮罩SVG图像保持其原始比例。

div {
  background: lime;
  font-size: 20px;
  height: 150px;
  width: 300px;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam, vitae, voluptates laudantium illum modi praesentium consequuntur deleniti facere sint aperiam sapiente! Illo nam dicta magnam error, numquam nostrum soluta?
</div>

在Firefox中运行此代码，启动SVG将正确覆盖div的宽度和高度的100％。在Chrome中运行它，形状将尽可能大，并遵守图像比例。

我意识到在提出这个问题时，这项技术还不是完全稳定，但是我仍然想使用它。有没有办法解决Chrome中的此限制？还是替代性CSS，无论尺寸如何，我都可以将其应用于整个元素的蒙版或剪辑？

如何在Chrome中处理蒙版大小

0 个答案: