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

效果：

请选择mask-position：

下面是原始图：

代码：

CSS代码：

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

HTML代码：

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

<p>请选择mask-position：<select id="maskPosition">
    <option value="top">top</option>
    <option value="right">right</option>
    <option value="bottom">bottom</option>
    <option value="left">left</option>
    <option value="center">center</option>
    <option value="left top" selected>left top</option>
    <option value="right top">right top</option>
    <option value="right bottom">right bottom</option>
    <option value="left bottom">left bottom</option>
</select></p>

JS代码：

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