#html #css #z-index #background-image #image
#HTML #css #z-индекс #background-image #изображение
Вопрос:
У меня есть фоновое изображение css, которое я хочу поместить перед моим тегом img. У фонового изображения css z-индекс равен 1, а у тега img z-индекс равен 0. Разрешено ли мне помещать тег img за фоном css с z-индексом или css-фон всегда будет находиться за тегом img независимо от его z-индекса?
Комментарии:
1. я думаю … если вы установите изображение в качестве фона. вы не можете увеличить z-индекс. почему бы вам не использовать два тега <img>
2. пожалуйста, пример кода, о котором вы говорите
3. @Anish — он имеет в виду элемент с фоном, который содержит и <img> внутри. Это можно сделать, и это допустимо, просто убедитесь, что вы не помещаете его за тегом <body> .
Ответ №1:
Конечно, HTML-элемент с background-image и более высоким z-index значением может накладываться на любой другой HTML-элемент, в вашем случае простой <img /> тег. Но <img> тег не должен быть вложен в тег, содержащий фоновое изображение.
Это сработает
<img src="../image.jpg" />
<div style="background: url(../image2.gif); z-index: 1">Content</div>
это не:
<div style="background: url(../image2.gif); z-index: 1">
<img src="../imag.jpg" />
</div>
Ответ №2:
Это работает, если вы устанавливаете position в относительное или абсолютное значение. Обязательно установите его, поскольку оно может быть просто унаследовано.
Ответ №3:
используйте 2 div с фоновым изображением или divs и задайте каждому div / изображению z-индекс
Ответ №4:
Было бы полезно, если бы вы могли показать некоторый код, чтобы понять, что вы хотите сделать. Если вы хотите отобразить изображение только перед другим, используйте 2 контейнера, таких как Div или Span..
<div id="image1">
<span id="image2"></span>
</div>