Заставьте изображение внутри div появляться за его фоновым изображением

Question

У меня есть div с фоном, который частично прозрачен с водяным знаком. Внутри div я называю изображение, но я хочу, чтобы это изображение появлялось за фоном div, чтобы на нем можно было видеть прозрачный фон div с водяными знаками. Это возможно? Вот CSS, который у меня есть, который не работает ...

.artist-container {
background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    z-index:331;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:330;
    position:relative;
}

Answer 1

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

HTML:

<span class="cover_contain">
   <img src="http://i.imgur.com/hla4q.jpg" alt="[image]" width="128" height="128" />
   <span class="cover_image"></span>
</span>

CSS:

span.cover_contain {
    display: inline-block;
    position: relative;
}
span.cover_image {
    display: block;
    background: url('http://i.imgur.com/5BtFV.png') center center no-repeat;
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

jsFiddle Live Preview

Answer 2

Дав .artist-container более высокий z-индекс, вы размещаете его выше в порядке наложения, чем дочернее изображение, хотя у детей всегда более высокий z-индекс, чем у их родителей.

Если вы хотите создать эффект водяного знака, вы можете:

1. Сделайте изображение фоном div и поместите в него водяной знак изображения.

2. Расположите еще один div внутри .artist-container абсолютно, с такими же размерами, как у изображения, и с более высоким z-индексом изображения, с водяным знаком в качестве фона.

Answer 3

Вы можете использовать отрицательный z-index, но в этом случае у вас должна быть оболочка, чтобы не иметь any z-index. Это одна из особенностей стекового контекста.

Вот демонстрационная скрипка: http://dabblet.com/gist/1731538

И код для вас будет примерно таким:

.artist-container {
    background:url(images/artist-back.png);
    width:310px;
    height:376px;
    margin-left:-9px;
    position:relative;
}
.artist-container img {
    width:300px;
    height:300px;
    margin-left:5px;
    z-index:-1;
    position:relative;
}

Answer 4

невозможно поставить фон перед изображением изображения в этом элементе.Вы можете просто использовать основное изображение в качестве фона или:

что вы могли бы сделать

<div class="holder">
    <img src=".." class="main_image">
    <img src=".." class="watermark">
</div>

.holder {
    width:100px;
    height:100px;
    position:relative;
    display:block;
 }

 .main_image {
     position:absolute;
     top:0;
     left:0;
     z-index:0;
 }
.watermark {
     position:absolute;
     top:0;
     left:0;
     z-index:9;
 }

Answer 5

сделать изображение фоновым изображением div и водяным знаком как img