画像のエッジを鮮明に保ちながらぼかすことはできますか?

CSS3 フィルターによる背景のぼかしによるエッジの定義

画像をぼかすと柔らかさと深みが加わりますが、多くの場合、エッジの鮮明さが損なわれます。鮮明な輪郭を維持しながらぼかした効果を実現できますか?

解決策: オーバーフローとネガティブを使用した Divマージン

CSS:

div {
  overflow: hidden;
}

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

HTML:

<div><img src="image.jpg" /></div>

このソリューションでは、ぼやけた画像が配置されます隠れたオーバーフローのある div 内。画像に負のマージンを設定することで、div 内でオフセットし、元のぼやけていないエッジを表示します。

デモ:

[エッジが定義されたぼやけた画像の画像] ]

どうやって作品:

• div は、ぼやけた画像が境界を越えてこぼれるのを防ぎます。
• 負のマージンは画像をわずかに内側に押し込み、ぼやけていない外側のエッジを明らかにします。
• ぼかしフィルターが画像に適用され、エッジを残しながら奥行きが追加されます

このテクニックは、「差し込みブラー」効果を効果的にシミュレートし、ブラーとシャープネスの望ましい組み合わせを提供します。

以上が画像のエッジを鮮明に保ちながらぼかすことはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。