iOS 7 のぼやけたオーバーレイ効果を CSS で再作成する方法

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/)

以上がiOS 7 のぼやけたオーバーレイ効果を CSS で再作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。