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

#html #css #background #position #background-image

#HTML #css #фон #положение #фоновое изображение

Вопрос:

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

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

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

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

Кому-нибудь немного помочь?

1. никто не сможет дать вам какой-либо полезный ответ с таким небольшим продолжением. PHP-код не делает ничего, чтобы помочь нам ответить на вопрос. Покажите нам готовый HTML-код или, по крайней мере, дайте нам представление get_avatar() о том, как выглядит вывод функции.

2. Вы хотите, чтобы CSS background-image отображался перед whatever изображением из <img> тега, верно? Итак, где фоновое изображение? это в <div> теге или <img> теге? Вы все еще не показываете нам достаточно деталей.

3. Фоновое изображение находится в <div> . Я не знал, что могу использовать фоновое изображение в <img>

4. вы можете поместить фоновое изображение на <img> , но, очевидно, это было бы довольно бессмысленно, если изображение переднего плана не имеет прозрачных битов.

Ответ №1:

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

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

или

Редактировать:

вы можете присвоить своему другому изображению z-индекс в минус следующим образом:

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

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

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

1. К сожалению, мне нужно заставить это работать в IE, поэтому я не могу использовать CSS3. В любом случае спасибо.

2. z-index ? серьезно? почему бы просто не установить его на visibility:hidden; ?

3. @spudley; предположим, что фоновое изображение прозрачно.

4. ну, он этого не указал (но тогда было много релевантной информации, которую он не указал, не получив много подсказок)

5. да 🙂 вот почему я задаю его вопрос

Ответ №2:

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

Установить z-индекс: 999;

Ответ №3:

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

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

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

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

Установите его на visibility:hidden;
Установите его на opacity:1;

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

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

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