你能用CSS精灵来制作webkit的遮罩盒图像（或者剪辑它吗？）

我正在玩

-webkit mask box image

css属性

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

这很有效。最后，我在蒙版图像的形状中添加了一个红色元素

唯一的问题是我需要25张不同的图片。我可以只加载25个不同的遮罩图像，但如果我只加载一个图像，然后使用类似于CSS精灵的方式重新定位或剪辑它，那就太好了

但是我想不出一个好的方法来处理掩码属性。这可行吗

我提出的一个解决方案是使用类似以下内容的标记：

<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中，该父DIV对其进行裁剪。我认为这是个不错的选择，但是我想知道是否有一个以webkit为中心的CSS属性正是为这个设计的。

我深入研究了webkit掩码，因为我对你的问题非常感兴趣-我不确定我是否正确理解了

-webkit掩码图像

和

-webkit掩码框图像

之间的区别-但主要区别是我认为，

-webkit mask box image

可以拉伸以适合容器，即使mask image的大小不同

由于您有一个固定大小的容器，我将尝试使用

-webkit mask position

移动掩码图像（请注意，它仅与

-webkit mask image

一起工作）

样本：

代码：

.图像{宽度：200px；高度：200px；}
.面具{
边框：1px纯绿色；
-webkit掩码图像：url（'mask.gif'）；
-webkit掩码重复：无重复；
-webkit掩码位置：0；
}
.mask2{
边框：1px纯绿色；
-webkit掩码图像：url（'mask.gif'）；
-webkit掩码重复：无重复；
-webkit掩码位置：0-200px；
}

---

不确定这是否适用于您，但至少我在这里玩得很开心。

我还有另一个问题-

-webkit mask image

和

-webkit mask box image

之间到底有什么区别？box image用于边界屏蔽，并且具有可以沿边界重复的附加功能…感谢您的回答！最后，我不得不放弃这一切。事实证明，mobile safari（至少在通过phonegap嵌入时）具有图像大小限制。我的精灵图像非常大，只有缩小尺寸才能加载。最后，我们不得不走老路。@DA-lame好主意在手机上会变成坏主意，我也经历过几次，呵呵。非常有用，不知道与-box的差异。我观察到的另一个区别是

-webkit mask image

无法在iOS设备上渲染图像（在chrome iOS上测试）而

-webkit掩码框图像

工作正常。

<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;
}