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

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

.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-индекс на изображении - live jsFiddle здесь.

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

Ответ 1

В конце концов я нашел метод "Наложение и вставка", второй из "Методы Джордона Добсона" , чтобы быть наиболее эффективным и наименее зависимым от отрицательные 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 с использованием оригинальной компоновки)

Ответ 2

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

http://jsfiddle.net/tA8EA/

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

Ответ 3

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