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

使用 CSS 重新創建 iOS 7 的模糊疊加效果

iOS 7 引入了獨特的模糊疊加效果，為某些元素增加了深度和視覺趣味。這種效果是透過將透明度與模糊濾鏡結合來實現的。雖然最初是 Apple 平台獨有的，但現在可以使用 CSS 和 JavaScript（可選）進行複製。

效果：不僅僅是透明度

iOS 模糊效果超越了簡單的透明度，因為它創造了一種微妙的模糊，軟化了底層的內容。這種效果在 iOS 控制中心呈現的音量和亮度疊加中尤其明顯。

CSS 解

幸運的是，現代 CSS 支援 filter 屬性，其中包含blur()函數來達到想要的效果。以下程式碼示範如何使用 CSS 建立模糊效果：

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

此程式碼將 20 像素模糊濾鏡套用至指定元素，並將其不透明度降低至 40%。模糊濾鏡是特定於瀏覽器的，因此使用多個供應商前綴來確保跨瀏覽器相容性。

即時範例

要查看實際效果，請查看此 JSFiddle 示範：[JSFiddle示範](https://jsfiddle.net/e5m5efrw/embedded/)

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