CSS を使用して iOS 7 のぼかし効果を複製する方法?

CSS を使用した iOS 7 のぼかし効果: 詳細

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 プロパティは透明度を制御します。効果を微調整するには、blur() と opacity のさまざまな値を試してください。

例:

このコードの動作例を JSFiddle で確認してください。

以上がCSS を使用して iOS 7 のぼかし効果を複製する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。