爲Web背景上的圖像疊加創建磨砂玻璃效果

Question

我正在將我的線框放在一起，並且正在設計新設計，因此無法獲得漂亮的設計。

我有一個我想要使用的背景圖像，但想要通過在圖像頂部分層看起來像一個非常輕的磨砂玻璃效果軟化整個效果。

任何人都可以建議如何最好地創建一個磨砂玻璃層或方式來實現類似的效果？我在層層考慮，以防在使用磨砂玻璃進行分層之前，決定在背景上放置其他幾個元素。

Answer 1

首先，我會在該圖片上放置一個div。這可以通過做這樣

<div class="box"> 
<img src="yourimage.jpg" /> 
<div class="top-layer"></div> 
</div> 



.box{ 
    position: relative; 
} 
.top-layer{ 
    position: absolute; 
    top: 0; left: 0; 
} 

的東西很可能會產生半透明PNG模仿使用GIMP或Photoshop磨砂玻璃並將其設置爲背景.TOP層最簡單，最有效的方式來實現。

如果你不想使用另一個圖像，並希望純粹的CSS解決方案，那麼你應該嘗試使用.top圖層樣式屬性。嘗試使用線性和徑向漸變（混合白色，淺藍色和透明度），不透明度和多個方塊陰影的多個背景。 這些設計應該會有所幫助：

http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/

特別是「某手機的主屏幕」和「專欄3：他們叫我先生的玻璃」。

Answer 2

所有磨砂玻璃基本上都是變形，並且通常還添加了一點光線。

對於你可以使用jQuery（如果你可以每次在客戶端運行它都沒問題），就像在this jQuery example（如果你遵循這個代碼，你會想要speed=0並且沒有縮放）。