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

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

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

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

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

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

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

Ответ 1

Что-то вроде этого должно работать (используя только 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, вам нужно будет применить фильтры, которые вы упомянули. Эта процедура подробно описана здесь.

Ответ 2

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

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

В IE6 вам понадобится фильтр AlphaImageLoader просто для отображения PNG с прозрачностью

Ответ 3

Если вы используете 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});

Ответ 4

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