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

CSS代码：

.mask-image {
    width: 250px; height: 187.5px;
    -webkit-mask-image: url(loading.png);
    mask-image: url(loading.png);
    border: 20px solid #34538b;
    padding: 20px;
    margin: 20px;
}
                

HTML代码：

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

<p>请选择mask-clip：<select id="maskClip">
    <option value="content-box">content-box</option>
    <option value="padding-box">padding-box</option>
    <option value="border-box" selected>border-box</option>
    <option value="fill-box">fill-box</option>
    <option value="stroke-box">stroke-box</option>
    <option value="view-box">view-box</option>
    <option value="no-clip">no-clip</option>
</select></p>
                

JS代码：

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