Можете ли вы использовать CSS-спрайт для webkit-mask-box-image (или обрезать его?) - PullRequest
Новая
       13

Можете ли вы использовать CSS-спрайт для webkit-mask-box-image (или обрезать его?)

4 голосов
/ 05 июля 2011

Я играю со свойством -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, который обрезает его. Я думаю, что это нормально, но мне было интересно, было ли свойство CSS, ориентированное на webkit, уже разработано именно для этого.

1 Ответ

8 голосов
/ 26 июля 2011

Я начал копаться в масках 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;
}

Не уверен, что это сработает для вас, но, по крайней мере, мне было весело копаться.

...