你可以为webkit-mask-box-image使用CSS精灵(或剪辑吗？)

Question

我正在玩-webkit-mask-box-imagecss属性.

<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中.我认为这是一个不错的选择,但是想知道是否有一个以webkit为中心的CSS属性已经设计好了.

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

不确定这是否适合你,但至少我很开心.