Проблемы с прозрачным изображением .png над другим изображением в Firefox / IE - PullRequest
Новая
       37

Проблемы с прозрачным изображением .png над другим изображением в Firefox / IE

0 голосов
/ 03 августа 2011

Я хочу разместить прозрачное изображение .png точно над другим изображением, скажем .jpeg

Вот мой код: 

<img src='someimage.jpg' width='480px' height='360px' /> 
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />

Отлично работает в Chrome, Safari и, возможно,новые версии Firefox.В более старых версиях Firefox и во всех версиях IE это не будет работать - вместо этого прозрачное изображение будет показано справа над изображением .jpeg.

Кто-нибудь может дать мне решение этой проблемы?

Ответы [ 2 ]

3 голосов
/ 03 августа 2011

Вот гораздо более простой способ убедиться, что изображения располагаются друг над другом: 

<div id="image-combo">
  <img src="someimage.jpg" style="width: 480px; height: 360px" />
  <img src="someother.png" style="width: 480px; height: 360px" />
</div>

А вот и CSS: 

#image-combo {
    position: relative;
    width: 480px;
    height: 360px;
}

#image-combo img {
    position: absolute;
    top: 0;
    left: 0;
}
1 голос
/ 03 августа 2011

Я не верю, что это проблема браузера.Это проблема размера окна ...

У вас есть два изображения размером 480 пикселей рядом друг с другом, поэтому это зависит от того, насколько широко у вас окно браузера.

Если ваше окно меньше960 пикселей в ширину, ваш код работает, потому что второе изображение переносится в строку под первым изображением.

Если окно имеет ширину более 960 пикселей, ваш код не будет работать и не будет работать, как вы описали, потому что вторые изображенияпросто сидит справа от первого.Ваш код перемещает второе изображение вверх, так что второе будет справа, а отрицательное поле перемещает его на точную высоту первого изображения.

Быстрое решение проблемы - вставить разрыв строки <br /> между двумя изображениями, чтобы второе изображение всегда было ниже первого изображения.Также не должно быть «px» в свойствах img width и height, поэтому удалите их. 

<img src='someimage.jpg' width='480' height='360' /><br />
<img src='someother.png' style='margin-top:-360px;margin-left:0px;position:absolute;border:none;' />

Возможно, существуют более элегантные решения, такие как использование контейнера.<div>, но не видя контекста остальной части вашего кода, невозможно сказать, что будет лучше.

...