多重蒙版圖像

Question

我正在嘗試製作多個蒙版圖像。 我該怎麼做;

1. image_01 + mask_image_01 = image_02
2. image_02 + mask_image_02 = image_03？

** image_02是image_01與mask_image_01的結果。

Answer 1

假設我理解你的權利（應在Chrome和IE中運行），您可以只使用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。

該方法唯一的主要問題是它使用img元素的src中的遮罩圖像，並將「真實」圖像置於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。