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

它可以很好地隔离，但在我的生产网站上有问题，其中父div的背景设置覆盖了图像上的z-index - live jsFiddle demo here。

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

Answer 1

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

http://jsfiddle.net/tA8EA/

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

Answer 2

最后我找到了'Overlay＆amp; amp; Inset Method'，Jordon Dobsons's techniques中的第二个是最有效且最不依赖于负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

我发布了动态图片列表加载here的答案。而不是低于z索引的图像，只有DIV具有背景图像和图像尺寸设置。

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

3 个答案: