Может ли изображение помечаться в html z-index за фоновым изображением css?

Question

У меня есть фоновое изображение css, которое я хочу перед моим тегом img.Фоновое изображение css имеет z-индекс 1, а тег img имеет z-индекс 0. Я вслух могу поставить тег img за фоном css с z-индексом, или фон css всегда будет позадитег img независимо от его z-индекса?

Answer 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>

Answer 2

Работает, если вы установите положение относительно или абсолютное.Обязательно установите его, так как он может быть просто унаследован.

Answer 3

Было бы полезно, если бы вы могли показать некоторый код, чтобы понять, что вы хотите сделать.Если вы хотите отображать изображение только перед другим, используйте 2 контейнера, например, Div или Span.

<div id="image1">
    <span id="image2"></span>
</div>

Answer 4

используйте 2 div с фоновым изображением или div и установите каждый div / image по z-index