CSS Box-Shadow的问题：图像上的插入

Question

我正在尝试复制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-index - 这里是现场jsFiddle 演示 。

第二种方法 - 在原始文章的评论中提到并包含在演示中 - 效果很好，但我的图像必须包含在标签中 - 它不能低于它。

Answer 1

页面有一个纯白色的背景，你给图像的z-index为-1，所以它在那个div下面。 有几种解决方法，具体取决于您的最终设计的外观，但如果您只是使#page透明，它可以工作：

http://jsfiddle.net/tA8EA/

或者你也可以设置页面到位置，并给它一个比图像更低的z索引： http ： //jsfiddle.net/PEgBv/

Answer 2

最后，我发现了'Overlay＆Inset Method'，这是Jordon Dobsons技术中第二个最有效且最不依赖负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演示 ）

Answer 3

我已经发布与动态图像列表加载一个答案在这里 。 而不是under-z-indexed图像，只有DIV具有背景图像和图像尺寸设置。