Html 多重遮罩图像

我正在尝试制作多幅蒙面图像。 我怎样才能做

image\u 01+mask\u image\u 01=image\u 02

image\u 02+mask\u image\u 02=image\u 03

**

image\u 02

是

image\u 01

与

mask\u image\u 01

的结果

---

（应该同时在Chrome和IE上运行）

假设我对您的理解正确，您可以对图像使用

背景属性：

CSS:

HTML:


浏览器兼容性可能是JavaScript方法的一个问题，因为IE（我认为）既不支持
.getElementsByClassName（）
也不支持
window.getComputedStyle（）
。不过，大多数其他浏览器似乎对此很满意。在Ubuntu11.04上的Firefox7和Chromium 14上进行了测试。
好吧，那你怎么能试试呢？你能给出示例代码吗
#image_o1 {
    background: transparent url(http://davidrhysthomas.co.uk/linked/astrid_avatar.png) top left no-repeat;
}

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

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();