Question

我正在玩-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中。我认为这是一个不错的选择，但是想知道是否有一个以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;
}

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

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

1 个答案: