Question

I m 玩弄-webkit-mask- Box-image cs property。

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

这发挥了巨大作用。最后,我对面罩的面貌有了一个红色元素。

唯一的捕获量是,我需要大约25种不同的图像。我只能装上25个不同的面罩图像,但如果我只拿一个图像,然后用像像像扫描仪,我重新定位或投射。

但我想到的是,用面罩这样做的好办法。是否可行?

我提出的一种解决办法是使用类似于这种标记:

<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,把这种形象放在自己种植的母体内。我认为,这是科索沃的一种选择,但是,我很想知道,是否已经设计了以网络为中心的CSS财产。

Answer 1

由于我确实对你的问题感兴趣,我打上了网库的面罩——我不敢肯定,如果我正确理解<条码>-webkit-mask-image和<条码>之间的区别——但我的主要区别是<条码>-webkit-mask- Box-image。即使面面面面貌不相同,也能够伸缩到集装箱。

由于你有固定大小的集装箱,我将尝试使用<代码>-webkit-mask-position来改变面罩形象(指出它只与-webkit-mask-image合作)。

Sample:

Code:

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

你们不敢工作,但是,在座各位却感到dig。

友情链接