ホームページ >ウェブフロントエンド >CSSチュートリアル >シャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?
シャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?
- Barbara Streisandオリジナル
- 2024-11-16 14:10:03305ブラウズ
CSS3 フィルターのぼかしを使用して定義されたエッジを実現する
CSS フィルター プロパティを使用して画像にぼかし効果を適用すると、次のような一般的な問題が発生します。画像の端もぼやけてしまいます。これは、特に鋭い線や詳細を保持する必要がある場合に、望ましくない結果を招く可能性があります。
この問題を解決し、定義されたエッジを維持するには、賢い技術を使用できます。ぼかした画像を
内に配置することで、要素を使用し、特定の CSS スタイルを適用すると、「挿入ぼかし」効果を作成できます。
次のコード スニペットは、この効果を実現する方法を示しています。
img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
margin: -5px -10px -10px -5px;
}
div {
overflow: hidden;
}
このコードでは、< ;画像>要素は
内に含まれています。オーバーフローを非表示に設定した場合。これにより、ぼかした画像が
の端でトリミングされ、周囲へのぼかし効果の波及がなくなります。
さらに、負のマージンが に適用されます。要素を使用して、
内でわずかに移動します。これらのマージンの値を調整して、エッジを維持しながら必要な量のぼかしを作成できます。
このテクニックは、定義されたぼかし効果を効果的に作成し、画像のエッジをシャープに保ちながら、内部の細部を柔らかくします。
以上がシャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。