Как наложить изображения в JavaScript?
Я должен решить следующую проблему.
Я имею два (или больше).PNG изображения тех же размеров. Каждое изображение PNG создается с цветом прозрачного фона.
Я должен отобразить img1 и на него img2, таким образом, в местах, где img2 имеет цвет trancparent, img1 будет замечен.
Например: img1 верхняя часть, заполненная прозрачным цветом и коровой на вниз части. img2 верхняя часть содержит облака и downpart, заполненный прозрачным цветом.
Я хочу объединить эти два изображения и видеть облака выше коровы.
Я понимаю, что должен использовать некоторый фильтр при отображении обоих изображений, но не уверенный который и что параметры его использовать.
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' />
и настройте верхний и левый значения
$('#i2').css({ position:'absolute', top:position.top-10, left: position.left+5});
Что-то вроде этого должно работать (используя только 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, вам нужно будет применить упомянутые фильтры. Эта процедура подробно описана здесь .
Вы можете попробовать установить для их .style.position значение «absolute», дать им одинаковые координаты с левым и верхним (или правым или нижним), а затем изменить их z-индекс. Хотя он довольно грязный и, возможно, не работает с вашей страницей, но я не могу придумать другого решения.
Вам не нужно использовать какой-либо фильтр (кроме IE6).
Вы можете просто разместить элементы position: absolute, чтобы оба элемента занимали одну и ту же область.
В IE6 вам понадобится фильтр AlphaImageLoader, просто чтобы отобразить PNG с прозрачностью