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中文網其他相關文章!