Проблемы с CSS Box-Shadow: вставка на изображении

Question

Я пытаюсь воспроизвести эффект CSS 'Vignette', подробно описано на сайте Трента Уолтона .

.vignette1 {
  box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
  -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
  -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.5);
  float: left;
}

.vignette1 img {
  margin: 0;
  position: relative;
  z-index: -1;

  width: 320px;
  height: 247px;
}

Он хорошо работает в отдельности, но имеет проблемы на моем производственном сайтегде настройки фона для родительского элемента div переопределяют z-index на изображении - live jsFiddle демо здесь .

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

Answer 1

Страница

имеет сплошной белый фон, вы даете изображению z-индекс -1, поэтому он находится под этим div. Есть несколько обходных путей, в зависимости от того, как будет выглядеть ваш окончательный дизайн, но если вы просто сделаете #page прозрачным, он будет работать:

http://jsfiddle.net/tA8EA/

Или вы также можете установить реальное положение страницы и дать ей более низкий z-индекс, чем у изображения: http://jsfiddle.net/PEgBv/

Answer 2

В итоге я нашел «Метод наложения и вставки», второй из методов Джордона Добсона , как наиболее эффективный и наименее зависимый от отрицательных z-индексов:

/* Border & Vignette Setup */

    figure{
      position:               relative;
      display:                block;
      line-height:            0;
      width:                  500px;
      height:                 333px;
      margin-bottom:          2em;
      border:                 1em solid #fff;
      -webkit-box-shadow:     0 .1em .3em rgba(0,0,0,.25);
      -moz-box-shadow:        0 .1em .3em rgba(0,0,0,.25);
    }

    figure::before{
      content:                "";
      position:               absolute;
      top:                    -1em;
      bottom:                 -1em;
      left:                   -1em;
      right:                  -1em;

    }

    figure::before,
    figure img{
      outline:                1px solid #ccc;    
    }

    figure.vignette img{
      z-index:                1;
      position:               relative;
      display:                block;
      width:                  100%;
      height:                 100%;

    }

/* Overlay & Inset Method */

    figure.overlay.inset::after{

    /* Mozilla Settings */
      -moz-box-shadow:        inset 0 0 150px rgba(0,0,0,.75);    

    /* Webkit Setting */
      -webkit-box-shadow:     inset 0 0 150px rgba(0,0,0,.75);
    }

( jsFiddle demo с использованием оригинального макета)

Answer 3

Я опубликовал ответ с динамической загрузкой списка изображений здесь . Вместо изображения под индексом z есть только DIVs с установленными размерами background-image и image.