Question

我正在重新设计我的网站，我想将一个内部阴影应用于背景图像。为网站做这件事的最佳方法是什么？

我考虑在PS中应用阴影，然后将背景图像设置为与边缘匹配，但它在边缘看起来不太好。

我的第二个想法是将CSS框阴影应用于body标签box-shadow:inset 0 0 100px #000;，但我知道框阴影会慢慢降低网站呈现效果。

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

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

Answer 1

我可以使用此代码修复它，

.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％，只有100％的视口。然而，将其修复，使其覆盖了所有内容，但无法滚动，因此添加overflow-y:scroll可以使其滚动。