ホームページ > 記事 > ウェブフロントエンド > iOS 7 のぼやけたオーバーレイ効果を CSS で再作成する方法
iOS 7 では、特定の要素に奥行きと視覚的な面白さを追加する、独特のぼやけたオーバーレイ効果が導入されました。この効果は、透明度とぼかしフィルターを組み合わせることによって実現されます。当初は Apple のプラットフォーム専用でしたが、現在は CSS と、オプションで JavaScript を使用して複製できるようになりました。
iOS のぼかし効果は、単純な透明を超えて、根底にあるコンテンツを柔らかくする微妙なぼかし。この効果は、iOS コントロール センターに表示される音量と明るさのオーバーレイで特に顕著です。
幸いなことに、最新の 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 サイトの他の関連記事を参照してください。