5

私は-webkit-mask-box-imagecssプロパティで遊んでいます。

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

これはうまくいきます。マスク画像の形をした赤い要素になってしまいます。

唯一の落とし穴は、約25種類の画像が必要なことです。25種類のマスク画像をロードすることもできますが、1つの画像だけをロードして、それをCSSスプライトのように使用して、位置を変更したりクリップしたりできれば素晴らしいと思います。

しかし、マスクプロパティを使用してそれを行うための良い方法を考えることはできません。それは実行可能ですか？

私が思いついた1つの解決策は、これに似たマークアップを使用することです。

<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-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 に答える