iOS 7 のぼやけたオーバーレイ効果を CSS で再現するにはどうすればよいですか?

CSS で再現された iOS 7 のぼやけたオーバーレイ効果

iOS 7 の Apple のオーバーレイ効果は、単に透明度の問題ではなく、微妙な影響を及ぼします。深みと面白さを加えるぼかし。この記事では、CSS を使用してこの効果を再現する方法を検討し、ぼかしたオーバーレイの背後にある秘密を明らかにします。

CSS ぼかしフィルター

このぼやけた効果を実現する鍵は、 CSS Blur() フィルター。Chrome、Firefox、Safari、IE10 などの最新のブラウザーで使用できます。 Blur() フィルターを使用するための構文は簡単です:

<code class="css">filter: blur(value);</code>

ここで、値は希望のぼかし半径をピクセル単位で表します。 Apple のオーバーレイのような微妙なぼかしの場合、約 20 ピクセルの値をお勧めします。

実装例

ページ上の要素にぼかし効果を適用するには、次の CSS ルールを追加するだけです:

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

古いブラウザとの互換性のために、ベンダー プレフィックスを含める必要がある場合があることに注意してください。また、ぼやけたオーバーレイによって下層のコンテンツが完全に隠されないように、不透明度の値を指定することを忘れないでください。

JavaScript での例

JavaScript を使用してぼかし効果を動的に適用するには、次のコードを使用できます:

<code class="javascript">var element = document.getElementById('myDiv');
element.style.filter = 'blur(20px)';
element.style.opacity = 0.4;</code>

blur() フィルターを利用し、必要に応じて JavaScript と組み合わせることで、iOS 7 で使用されるぼかしオーバーレイ効果を簡単に再作成できます。 、Web アプリケーションの見た目の美しさを高めます。

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