Как наложить изображения в JavaScript? - PullRequest
Новая
       4

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

13 голосов
/ 24 июня 2010

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

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

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

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

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

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

Ответы [ 4 ]

16 голосов
/ 24 июня 2010

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

3 голосов
/ 24 июня 2010

Если вы используете 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});
3 голосов
/ 24 июня 2010

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

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

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

0 голосов
/ 24 июня 2010

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

...