CSS3 フィルターで画像をぼかすときにエッジを鮮明に保つにはどうすればよいですか?

CSS3 フィルターぼかしで定義されたエッジを維持する

CSS3 を使用してフィルター: Blur() プロパティを画像に適用すると、画像のエッジが画像がぼやけることもあります。画像の残りの部分をぼかしながらシャープなエッジを維持したい場合、これは望ましくない可能性があります。

解決策: 隠れたオーバーフローを使用した負のマージン

シャープなエッジを実現するには画像をぼかす場合は、画像を

で囲むことができます。 に負のマージンを適用します。要素。この手法には、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;
}

div {
  overflow: hidden;
}

このアプローチでは、画像のエッジが鮮明なままで残りの画像がぼやけている

出力

が生成されます。 。 のマイナスのマージンは、要素は画像の周囲の「バッファ ゾーン」として機能し、ぼかし効果が境界を超えないようにします。

デモ:

<div>
  <img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/300" class="lazy" alt="CSS3 フィルターで画像をぼかすときにエッジを鮮明に保つにはどうすればよいですか?" >
</div>

[子猫の画像シャープなエッジとぼやけた背景]HTML:

以上がCSS3 フィルターで画像をぼかすときにエッジを鮮明に保つにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。