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

回到相关文章 »

效果：

请选择mask-repeat：

下面是原始图：

代码：

CSS代码：

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

HTML代码：

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

<p>请选择mask-repeat：<select id="maskRepeat">
    <option value="no-repeat">no-repeat</option>
    <option value="repeat-x">repeat-x</option>
    <option value="repeat-y">repeat-y</option>
    <option value="repeat" selected>repeat</option>
    <option value="space">space</option>
    <option value="round">round</option>
</select></p>

JS代码：

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