如何使用 CSS 複製 iOS 7 的模糊效果？

iOS 7 的 CSS 模糊效果：近距離觀察

Apple 的 iOS 7 引入了視覺上吸引人的模糊疊加效果。雖然這看起來只是一個簡單的透明度問題，但這種效果不只是表面上看起來那麼簡單。

問題：我們如何使用 CSS 以及（如果需要）JavaScript 來複製這個效果？

答案：

CSS 3 提供了實現這種效果的解決方案：

<code class="css">#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}</code>

blur() 過濾器為元素，而opacity 屬性控制透明度。若要微調效果，請嘗試使用不同的模糊（）和不透明度值。

範例：

在 JSFiddle 上探索此程式碼的實際範例。

以上是如何使用 CSS 複製 iOS 7 的模糊效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！