5

我正在玩-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 属性。

4

1 回答 1

9

我深入研究了 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;
}

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

于 2011-07-26T10:18:08.273 回答