我正在尝试使用-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属性。
-webkit-mask-image
和-webkit-mask-box-image
之间到底有什么区别? - easwee