如何用CSS實現iOS 7的模糊疊加效果？

使用CSS 實現iOS 7 的模糊疊加效果

Apple 的iOS 7 引入了一種獨特的模糊疊加效果，其範圍超出了單純的透明度。開發人員經常想知道如何使用 Web 技術複製這種吸引人的視覺增強效果。

CSS 解決方案

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>

透過將此CSS 程式碼新增到元素中，您可以套用模糊疊加效果。 “blur()”過濾器設定應用的模糊量，而“opacity”控制元素的透明度。

實際範例

這是一個 JSFiddle 範例示範了這種技術：https://jsfiddle.net/nwq9t/.

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