你可以使用CSS精灵来制作webkit-mask-box-image（或者裁剪它）吗？

Question

我正在尝试使用-webkit-mask-box-image CSS属性。

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

这个方法很不错。最终得到的是一个红色的形状与mask图像相同。

唯一的问题是我需要大约25个不同的图像。我可以加载25个不同的mask图像，但如果能只加载一个图片并像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>

我不是使用背景图像并将其定位为精灵，而是使用DIV并在父DIV中定位它以进行裁剪。我认为这是一个可以接受的选择，但想知道是否已经为此设计了一个基于Webkit的CSS属性。

- DA.

---

我还有一个问题 - -webkit-mask-image 和 -webkit-mask-box-image 之间到底有什么区别？ - easwee

盒子图像用于边框遮罩，并具有其他功能，例如可以沿边框重复...http://www.html5rocks.com/en/tutorials/masking/adobe/ - Muhammad Umer

Answer 1

我深入研究了 Webkit 遮罩，因为我对你的问题非常感兴趣 - 我不确定我是否正确理解了 -webkit-mask-image 和 -webkit-mask-box-image 之间的区别 - 但我认为主要区别在于 -webkit-mask-box-image 可以拉伸以适应容器，即使遮罩图像的大小不同。

由于您有一个固定大小的容器，我建议使用 -webkit-mask-position 移动遮罩图像（请注意，它只能与 -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;
}

我不确定这个对你是否有用，但至少我在挖掘中感到很愉快。

- easwee

---

感谢回答！最后，我不得不抛弃这些。结果发现移动Safari（至少在通过PhoneGap嵌入时）有图像大小限制。我的雪碧图像非常大，直到我减小了尺寸才能加载。最后，我们不得不采用旧的切片方法。 - DA.

@DA - 真遗憾，好的想法在移动设备上变得不那么好用了 - 我也遇到过几次呢，呵呵。 - easwee

非常有用，不知道 diff 和 -box 的区别。 - Noel Tock

我观察到的另一个区别是，在iOS设备上（在chrome iOS上测试），-webkit-mask-image无法渲染图像，而-webkit-mask-box-image可以完美地工作。 - Pardeep Jain