整个地方的内部阴影覆盖？

我正在重新设计我的网站，我想将内部阴影应用于背景图像。什么是为网站做到这一点的最佳方式？整个地方的内部阴影覆盖？

我想过在PS中应用阴影，然后设置背景图像以匹配边缘，但它在边缘周围看起来不会很好。

我的第二个想法是将CSS盒子阴影应用于body标签box-shadow:inset 0 0 100px #000;，但我知道盒子阴影减慢了网站渲染的速度。

这样做最好的方法是什么？

作为参考，这里是两个背景图像，一个没有阴影和一个。

- http://i.imgur.com/8Wzj8l.png - http://i.imgur.com/StVpOl.png

来源

2011-12-22 Charlie

您是否考虑了径向渐变？ http://www.colorzilla.com/gradient-editor/ – Kai 2011-12-22 05:51:46

图像的速度，但我会使用'盒阴影'。我将离开IE8去死。 – Blender 2011-12-22 05:52:22

不是为了可比性的缘故，并且知道它在每个设备上看起来都不错，只需要在PS中添加阴影就更好了。或者有没有理由不这样做？也许使用透明的PNG会有所帮助：http://thedesignspace.net/MT2archives/000103.html#.TvLGf1QZvCM。如果你在4个不同浏览器上的努力工作方式不同，那将是一件耻辱。（当然，在光明的未来这不会是一个问题） – 2011-12-22 05:57:06

我能够通过使用此代码来解决它，

.overlay{ 
position: fixed; 
left: 0px; 
top: 0px; 
right: 0px; 
bottom: 0px; 
overflow-y:scroll; 
box-shadow: inset 0 0 100px #000; 
}

我的HTML看起来像，

<body> 
<div class="overlay"> 
Stuff... 
</div> 
</body>

唯一的问题那就是没有position:fixed它不会是100％，只有v的100％ iewport。但是，如果将其固定，则会覆盖所有内容，但不能滚动，因此，添加overflow-y:scroll后可以进行滚动。

来源

2011-12-22 19:26:21 Charlie

整个地方的内部阴影覆盖？

回答

相关问题