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

最后,我找到了"覆盖和插图方法",第二乔丹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演示)