复合蒙版中每个蒙版图像的不同CSS蒙版位置值

Question

我有两个掩码图像用于复合蒙版，被设置为mask-image属性。我想为每个图像指定不同的蒙版位置值，因为图像的大小不同，并且没有定位到相同的比例。

.my-class {
  mask-image: url(/masks/foo.png), url(/masks/bar.png);
  mask-position: ?; /* Set 0 for foo.png, but 15px -50px for bar.png */
  mask-size: 100%;
  mask-repeat: no-repeat;
}

foo.png和bar.png应该有不同的掩码位置值。在我将它添加到foo.png之前，我需要bar.png上的偏移量。

这甚至可能吗？

Answer 1

根据当前规范，这是可能的，这是初始定义（并且是实验性的，因此可能会发生变化）。来自https://developer.mozilla.org/en-US/docs/Web/CSS/mask-position：

mask-position: 0 0, 15px -50px;

这遵循定位多个背景图像的模式。