CSS Box-Shadow:Inset on image的问题

Question

我在尝试复制CSS 'Vignette‘的效果，detailed on Trent Walton's site。

.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;
}

它在独立环境下工作得很好，但在我的生产站点上有问题，父demo here的背景设置覆盖了image - live jsFiddle div上的z索引。

第二种方法-在原始文章的评论中提到并包含在演示中-工作得很好，但我的图像必须包装在标签中-它不能在它下面。

Answer 1

最后，我发现Jordon Dobsons's techniques的第二种方法‘Overlay & Inset Method’是最有效的，对负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 2

页面有一个纯白的背景，你给图像一个-1的z索引，所以它在div下面。有几种变通方法，这取决于你的最终设计是什么样子，但如果你只是让#page透明，它就会起作用：

http://jsfiddle.net/tA8EA/

或者，您还可以将页面设置为实际的位置，并为其提供比图像更低的z索引：http://jsfiddle.net/PEgBv/

Answer 3

我已经发布了一个动态图片列表加载here的答案。不是z索引下的图像，而是设置了背景图像和图像尺寸的DIVs。