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

效果：

请选择mask-origin：

下面是原始图：

代码：

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-origin：<select id="maskOrigin">
    <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>
</select></p>

JS代码：

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