Question

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

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

4个DIV设置为位置：绝对，上/下：0px，左/右：0px，每个中都有一个图像（图像块链接。一般情况不好？）
与上面相同，但div的高度/宽度是固定的，背景图像是背景图像而不是图像（仍然阻挡链接？！）
CSS3多个背景。两个在左上/右上方的主体和底部的额外div高度：300; margin-top：-300px总是显示在底部（糟糕的浏览器支持）
身体上的CSS3径向渐变（只要你滚动你松开背景。一个额外的div可以解决这个问题。再次糟糕的浏览器支持）

关于浏览器支持：解决方案必须在最新版本的firefox，chrome，IE中工作，如果可能的话，还可以使用opera（Safari）（按重要性排序）。这是绝对最低限度。但它也应该适用于旧版浏览器。如果可能的话，Firefox 3.6和IE 8甚至7。我对chromes版本的历史知之甚少，但看起来chrome用户几乎都是最新的，所以放弃对chrome 15及更低版本的支持并不是什么大问题？！是否有任何重大变化可以使某些东西在chrome 17中起作用，但不是例如15？

CSS3径向渐变在我看来是最好看的解决方案，但我担心很多用户不支持它，因为他们的旧浏览器。使用4 DIV解决方案我遇到了无法点击的链接问题，因为图像会阻止它。我试着搞乱z-index，但这不起作用。我给了DIVs z-index：1和#container（其中放置了所有内容）的z-index为10.这不应该有用吗？ 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;

Answer 2

我之前在this blog中使用了这种技术并且效果非常好。但不确定是否支持旧浏览器。

Answer 3

取决于你想要的东西，这样的东西可能会起作用;

<style>

height: 100%;
width: 100%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSI5OSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNjUiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 63%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */

background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(63%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */

background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */

background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 12+ */

background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */

background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 63%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}
</style>

在我的浏览器上运行，应该适用于所有浏览器。这是不整洁的，当然，但允许你将其设置为HTML，然后你可以拥有身体，例如，你想要的颜色或图像。

在行动中见到hereee。 http://jsfiddle.net/joshuamartin/taN2Z/4/

http://www.colorzilla.com/gradient-editor/

Answer 4

使用CSS！

Willem的回答略有不同，正如JohnK所建议的那样，帽子倾斜Chris Coyier：

box-shadow: inset 0 0 85px rgba(0, 0, 0, 0.4);

JSFiddle：http://jsfiddle.net/charlesgoodwin/wKQ2y/

效果很好！

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

4 个答案: