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 中国語 Web サイトの他の関連記事を参照してください。