Многократное замаскированное изображение - PullRequest
Новая
       3

Многократное замаскированное изображение

0 голосов
/ 14 ноября 2011

Я пытаюсь сделать несколько замаскированных изображений.Как я могу сделать;

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

** image_02 результат image_01 с mask_image_01.

(должен работать как в Chrome, так и в IE)

1 Ответ

1 голос
/ 14 ноября 2011

Предполагая, что я вас правильно понял, вы можете просто использовать свойство 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 и ставит'image in 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().Большинство других браузеров, тем не менее, кажутся достаточно довольными этим.Протестировано в Firefox 7 и Chromium 14 на Ubuntu 11.04.

...