<html> 上的 box-shadow 插入仅适用于网站的可视部分
我使用box-shadow该html元素为网站的背景提供浅色晕影效果。但如果网站的内容比窗口长，则box-shadow只会显示在网站第一眼可见的部分。如果向下滚动，则box-shadow停止工作。
这是我的 CSS 代码：
\n\nhtml {\n box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;\n height: 100%;\n}\n\nbody {\n font-family: "Source Sans Pro", sans-serif; \n margin: 0;\n background: url(\'../img/subtle_grunge.png\');\n}\n我尝试将 应用于该box-shadow元素body，但这也不起作用。令人惊讶的是，作品的背景图像设置得body很好。该问题出现在所有浏览器中（Safari 6、Firefox 18、Chrome 24 \xe2\x80\x93 均在 Mac 上）。\n有解决方案吗？
这是一个示例： http: //dreamapp.de/sites/portfolio/boxshadowproblem.html
\n\n
您可以在标签<div>后面添加一个<body>并将 CSS 属性移至该标签。例如：
超文本标记语言
<body>
<div class="vignette"></div>
<!-- rest of your code -->
CSS
.vignette {
position: fixed;
/* to prevent empty space around the vignette */
top: 0;
left: 0;
/* extends to the whole visible area */
width: 100%;
height: 100%;
box-shadow: 0 0 200px rgba(0,0,0,0.9) inset;
}
这样，该元素将保留在所有其他元素下方，并且您可以滚动内容。