複数のマスク画像

Question

複数のマスク画像を作成しようとしています。 どうすればできますか。

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

** image_02は、mask_image_01の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。

この方法の唯一の主な問題は、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

ブラウザの互換性は、IEが（と思う）.getElementsByClassName()またはwindow.getComputedStyle()のいずれかをサポートしていないとして、しかし、JavaScriptのアプローチに問題がある可能性があります。しかし、他のブラウザの大部分は、それで十分幸せそうに見えます。 Ubuntu 11.04のFirefox 7とChromium 14でテスト済みです。