Как накладывать изображения в javascript?

Question

Мне нужно решить следующую проблему.

У меня есть два (или более). PNG изображения одинаковых размеров. Каждое изображение PNG создается с прозрачным цветом фона.

Мне нужно отобразить img1 и на нем img2, поэтому в местах, где img2 имеет прозрачный цвет, будет отображаться img1.

Например: img1 верхняя часть заполнена прозрачным цветом и коровой на нижней части. img2 верхняя часть содержит облака и нижнюю часть, заполненную прозрачным цветом.

Я хочу объединить эти два изображения и увидеть облака над коровами.

Я понимаю, что мне нужно использовать какой-либо фильтр при отображении обоих изображений, но не знаю, какой из них и какие параметры его использовать.

Answer 1

Вам не нужно использовать какой-либо фильтр (except in IE6).

Вы можете просто разместить до <img> элементов друг на друга, используя CSS position: absolute, чтобы оба элемента занимали одну и ту же область.

In IE6, you'll need an AlphaImageLoader filter simply to display the PNGs with transparency

Answer 2

Вы можете попробовать установить их .style.position к «абсолютной», дать им одинаковые координаты с левой и верхней (справа или снизу), а затем изменить их Z-индекс. Хотя это довольно грязно, и, может быть, это плохо работает с вашей страницей, но я не могу придумать другого решения.

Answer 3

Что-то, как это должно работать (используя только HTML/CSS):

HTML:

<div class="imageWrapper"> 
    <img class="overlayImage" src="cow.png"> 
    <img class="overlayImage" src="clouds.png"> 
    <img class="overlayImage" src="downpart.png"> 
</div> 

CSS:

.imageWrapper { 
    position: relative; 
} 
.overlayImage { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Имейте в виду, что IE6 не эффективно обрабатывайте прозрачность в PNG. Если вам нужно, чтобы он работал в IE6, вам нужно будет применить фильтры, которые вы упомянули. Эта процедура: detailed here.

Answer 4

Если вы используете JQuery попробовать это в любом браузере

<script> 
$(function() { 
    var position = $("#i1").offset(); 
    $('#i2').css({ position:'absolute', top:position.top, left: position.left}); 
}); 
</script> 
<img id='i1' src='images/zap_ring.png' /> 
<img id='i2' src='images/zap_ring_hover.png' /> 

и настроить top & left значения

$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});