Вывести фоновое изображение на передний план.Возможно или нет?

Question

Мне действительно нужно получить фоновое изображение перед другим изображением, и я не могу найти способ сделать это без использования абсолютного позиционирования.

<div><?php get_avatar($x, 56); ?></div>

get_avatar отображает изображение.Итак, HTML выглядит так:

<div><img src="whatever"></div>

Немного помогите кому-нибудь?

Answer 1

вы можете использовать css multiple background property

проверьте это http://www.css3.info/preview/multiple-backgrounds/

или

Edit:

Вы можете задать еще один z-индекс изображения в минус, например:

    div{
    background:yellow;
    position:relative;
}
img{
    position:relative;
    z-index:-1
}

<div>
 <img alt="" src="http://dummyimage.com/200x200/000/45454&text=images">
</div>

проверьте пример http://jsfiddle.net/sandeep/5vpG7/

Answer 2

Ваш код (для ясности добавлен стиль фонового изображения):

<div style='background-image:url(something.jpg);'><img src="whatever.jpg"></div>

Чтобы фоновое изображение отображалось вместо изображения на переднем плане, самое простое решение - просто сделать <img> невидимым.

Два способа сделать это с помощью CSS:

1. Установите значение visibility:hidden;

2. Установите значение opacity:1;

Первое решение является лучшим, так как оно будет работать во всех браузерах.

Изменение непрозрачности с помощью Javascript может дать вам эффект затухания, но в этом случае ожидайте проблем с IE.

Надеюсь, это поможет.

Answer 3

Вы можете использовать свойство css z-index.

Установить z-index: 999;