整個地方的內部陰影覆蓋？

我正在重新設計我的網站，我想將內部陰影應用於背景圖像。什麼是爲網站做到這一點的最佳方式？整個地方的內部陰影覆蓋？

我想過在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

整個地方的內部陰影覆蓋？

回答

相關問題