8

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

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

  • 4 个 DIV 设置为 position:absolute, top/bottom:0px,left/right: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，但这不起作用。我给了 DIV 的 z-index:1 和 #container（放置所有内容）的 z-index 为 10。这不应该吗？z-index 甚至会影响链接吗？

那么你们认为，这将是一个好的解决方案吗？我显然需要一些帮助。谢谢！

4

4 回答 4

11

您可以使用内部框阴影

 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;
于 2012-03-08T07:54:00.177 回答
1

使用 CSS！

根据向Chris Coyier 倾斜的 JohnK 的建议，Willem 的回答略有不同：

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

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

它工作得很好！

于 2013-11-06T17:02:25.703 回答
1

我已经使用了之前在这篇博客中解释过的这种技术，并且效果非常好。但不确定是否支持旧浏览器。

于 2012-03-07T14:45:19.167 回答
1

取决于你想要什么，这样的事情可能会起作用；

<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，然后您可以拥有 body，例如，具有您想要的颜色或图像。

看到它在行动hereee。http://jsfiddle.net/joshuamartin/taN2Z/4/

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

于 2012-03-07T14:51:50.627 回答