css - 你能为 webkit-mask-box-image 使用 CSS sprite(或剪辑它吗？)

Question

我正在使用 -webkit-mask-box-image css 属性。

<div style="
    background-color: red;
    -webkit-mask-box-image: url('images/cards/set1.png');
"></div>

这很好用。我最终得到了蒙版图像形状的红色元素。

唯一的问题是我需要大约 25 张不同的图像。我可以只加载 25 个不同的蒙版图像，但如果我可以只加载一个图像，然后像 CSS Sprite 一样使用它，我可以重新定位或剪辑它，那就太好了。

但我想不出使用 mask 属性来实现这一点的好方法。可行吗？

我想出的一个解决方案是使用类似于此的标记:

<div style="
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative;">
    <div style="
        background-color: red;
        -webkit-mask-box-image: url('images/cards/set1.png');
        position: absolute;
        top: -400px
    "></div>
</div>

我没有像使用 Sprite 图那样使用背景图像并将其定位，而是使用 DIV 并将其定位在对其进行裁剪的父 div 中。我认为这是一个不错的选择，但想知道是否已经有专门为此设计的以 webkit 为中心的 CSS 属性。

Answer 1

我开始深入研究 webkit 掩码，因为我对你的问题很感兴趣 - 我不确定我是否正确理解了 -webkit-mask-image 和 -webkit- 之间的区别mask-box-image - 但对我来说主要区别在于 -webkit-mask-box-image 可以拉伸(stretch)以适合容器，即使掩码图像大小不同也是如此。

因为你有一个固定大小的容器，我会尝试使用 -webkit-mask-position 来移动 mask 图像(注意它只能与 -webkit-mask-image 一起使用)。

样本:http://jsfiddle.net/easwee/pChvL/68/

代码:

<div class="image mask">
    <img src="image.jpg" />
</div>
<br />
<div class="image mask2">
    <img src="image.jpg" />
</div>


.image {width:200px;height:200px;}
.mask {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 0;
}
.mask2 {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 -200px;
}

不确定这是否适合您，但至少我在挖掘过程中玩得很开心。