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

它单独运行良好，但在我的生产站点上存在问题，其中父 div 的背景设置覆盖了图像上的 z-index - live jsFiddle demo here .

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

Answer 1

页面具有纯白色背景，您为图像指定的 z-index 为 -1，因此它位于该 div 下方。有几种解决方法，具体取决于您的最终设计的外观，但如果您只是使#page 透明，它就可以工作:

http://jsfiddle.net/tA8EA/

或者你也可以将页面设置为 realtive 并给它一个比图像更低的 z-index: http://jsfiddle.net/PEgBv/