다중 마스크 된 이미지

Question

다중 마스크 된 이미지를 만들려고합니다. 어떻게 만들 수 있습니까?

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

** image_02은 mask_image_01와 image_01의 결과입니다.

내가 바로 당신을 이해했다고 가정

Answer 1

(크롬과 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으로 사용할 수 있으며 마스크로 전환 할 수 있습니다 (다소 혼란 스럽지만) 개선 : IE (나는 생각한다) 중 하나 .getElementsByClassName()또는window.getComputedStyle()를 지원하지 않는

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

브라우저 호환성하지만, 자바 스크립트 접근 방식에 문제가있을 수 있습니다. 하지만 대부분의 다른 브라우저는 충분히 만족 스럽습니다. Ubuntu 11.04의 Firefox 7 및 Chromium 14에서 테스트되었습니다.