Question

我正在尝试制作多个蒙版图像。我该怎么做;

image_01 + mask_image_01 = image_02
image_02 + mask_image_02 = image_03？

** image_02是image_01与mask_image_01的结果。

（应该在Chrome和IE上运行）

Answer 1

假设我理解你是对的，你可以使用background属性作为图像：

CSS：

#image_o1 {
    background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) top left no-repeat;
}

HTML：

<img id="image_o1" src="http://davidrhysthomas.co.uk/linked/mask.png" />

JS Fiddle demo

此方法唯一的主要问题是它使用src元素的img中的屏蔽图像，并将“真实”图像放入background。

如果JavaScript是一个选项，那么你可以使用你想要掩盖的图像作为图像元素的src，然后将其切换为掩模，尽管这有点乱（并且肯定可以改进）：

function imageMask(){
    var masked = document.getElementsByClassName('masked');
    var mD, mU, rImg;
    for (i=0; i<masked.length; i++){
        mD = window.getComputedStyle(masked[i],null).backgroundImage;
        mU = mD.substring(mD.indexOf('(')+1,mD.indexOf(')'));
        rImg = masked[i].src;

        masked[i].src = mU;
        /*
            For some (probably obvious) reason:

        masked[i].style.backgroundImage = rImg;

            refused to work, so I'm using 'setAttribute()' instead, in a
            hackish and hideous workaround.
        */
        masked[i].setAttribute('style','background-image: url(' + rImg + ');');

    }
};

window.onload = imageMask();

JS Fiddle demo

浏览器兼容性可能是JavaScript方法的一个问题，因为IE（我认为）不支持.getElementsByClassName() 或 window.getComputedStyle()。不过，大多数其他浏览器看起来都很开心。在Ubuntu 11.04上测试了Firefox 7和Chromium 14.

多个蒙面图像

1 个答案: