html - 如何在 HTML 中制作晕影效果？

Question

我正在寻找关于如何制作 vignette effect 的好的解决方案对于一个网站。 Angular 落应该比页面的背景颜色更暗，如径向渐变。

到目前为止，我尝试了不同的方法:

• 4 个 DIV 设置为 position:absolute、top/bottom:0px、left/right:0px，每个中有一张图片(图片 block 链接。一般来说是个坏主意？)
• 与上面相同，但 div 具有固定的高度/宽度和背景图像而不是图像(仍然阻止链接？!)
• CSS3 多重背景。 body 上有两个用于左上/右上角，底部有一个额外的 div，高度:300；margin-top:-300px 始终显示在底部(浏览器支持不佳)
• body 上的 CSS3 径向渐变(一旦滚动，背景就会松动。一个额外的 div 可以解决这个问题。浏览器支持也很差)

关于浏览器支持: 该解决方案必须在最新版本的 firefox、chrome、IE 中工作，如果可能，还包括 opera 和 safari(按重要性排序)。这是绝对最低限度。但它也应该适用于旧版浏览器。 Firefox 3.6 和 IE 8 甚至 7(如果可能)。 chrome的版本历史我不是很了解，不过好像chrome的用户几乎都是最新的，所以放弃对chrome 15及更低版本的支持也没什么大问题吧？!是否有任何重大变化可以使某些东西在 chrome 17 中工作，但不能在 chrome 15 中工作？

CSS3 径向渐变在我看来是最好看的解决方案，但恐怕很多用户不支持它，因为他们的浏览器很旧。使用 4 DIV 解决方案时，我遇到了无法点击链接的问题，因为图像挡住了它。我试过弄乱 z-index，但这不起作用。我给 DIV z-index:1 和#container(放置所有内容的地方)设置了 10 的 z-index。这不可行吗？ z-index 甚至会影响链接吗？

那么你们认为什么是好的解决方案？我显然需要一些帮助。谢谢!

Answer 1

你可以使用一个内框阴影

 box-shadow: inset 0 0 100px #000;

演示:http://jsfiddle.net/ACPUP/

但是在IE7/8下是不行的。旧版本的 Firefox、Chrome、Safari 或 Opera 可能需要它们的前缀:-webkit-box-shadow、-moz-box-shadow 或 -o-box-shadow。

你也可以叠加这些阴影以获得更戏剧化的效果，但我不知道旧版本的浏览器是否支持。

box-shadow: inset 0 0 120px #000, inset 0 0 80px #000, inset 0 0 40px #000;