mask-composite不同属性值与png图片遮罩效果示意实例页面

回到相关文章 »

效果：

请选择mask-composite：

下面是原始图：

下面是使用的遮罩素材：

代码：

CSS代码：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(loading.png), url(star.svg);
    mask-image: url(loading.png), url(star.svg);
}

HTML代码：

<img src="ps1.jpg" class="mask-image">

<p>请选择mask-composite：<select id="maskComposite">
    <option value="add">add</option>
    <option value="subtract">subtract</option>
    <option value="intersect" selected>intersect</option>
    <option value="exclude">exclude</option>
</select></p>

或者：
select id="maskComposite2">
    <option value="source-over" selected>source-over</option>
    <option value="source-in">source-in</option>
    <option value="source-out">source-out</option>
    <option value="source-atop">source-atop</option>
    <option value="destination-over">destination-over</option>
    <option value="destination-in">destination-in</option>
    <option value="destination-out">destination-out</option>
    <option value="destination-atop">destination-atop</option>
    <option value="plus-lighter">plus-lighter</option>
    <option value="copy">copy</option>
    <option value="clear">clear</option>
    <option value="xor">xor</option>
</select>

JS代码：

var eleSel = document.getElementById('maskComposite');
var eleImg = document.querySelector('.mask-image');
if (eleSel && eleImg) {
    eleSel.addEventListener('change', function () {
        eleImg.style.webkitMaskComposite = this.value;
        eleImg.style.maskComposite = this.value;
    });
}