CSS Box-Shadow 的问题：插入图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4783193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problems with CSS Box-Shadow:Inset on image
提问by Jon Hadley
I'm trying to replicate the CSS 'Vignette' effect, detailed on Trent Walton's site.
我正在尝试复制 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;
}
It works well in isolation, but has problems on my production site, where the background settings for a parent div override the z-index on the image - live jsFiddle demo here.
它单独运行良好，但在我的生产站点上存在问题，其中父 div 的背景设置覆盖图像上的 z-index - 现场 jsFiddle demo here。
The second approach - mentioned in the original article's comments and included in the demo - works well, but my image has to be wrapped in the tag - it can't be below it.
第二种方法 - 在原始文章的评论中提到并包含在演示中 - 效果很好，但我的图像必须包含在标签中 - 它不能低于它。
采纳答案by Jon Hadley
In the end I found the' Overlay & Inset Method', the second of Jordon Dobsons's techniquesto be the most effective and least reliant on negative z-indexes:
最后，我发现“叠加和插入方法”，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 demousing original layout)
（使用原始布局的jsFiddle 演示）
回答by methodofaction
page has a solid white background, you're giving the image a z-index of -1, so it's going underneath that div. There are several workarounds, depending on how your final design is going to look, but if you just make #page transparent it works:
页面有纯白色背景，您给图像的 z-index 为 -1，因此它位于该 div 下方。有几种解决方法，具体取决于您的最终设计的外观，但如果您只是让 #page 透明，它就可以工作：
Or you can also set page to position realtive and give it a lower z-index than the image: http://jsfiddle.net/PEgBv/
或者您也可以将页面设置为实际位置并为其设置比图像更低的 z-index：http: //jsfiddle.net/PEgBv/
