CSS3 フィルターを使用してエッジを汚さずに画像をぼかす方法-CSSチュートリアル-php.cn

CSS3 フィルターを使用してエッジを汚さずに画像をぼかす方法

Susan Sarandon

リリース： 2024-11-21 16:58:09

オリジナル

549 人が閲覧しました

How to Blur an Image Without Smudging Edges Using CSS3 Filters?

CSS3 フィルター: エッジを汚さずに画像をぼかす方法

CSS3 フィルターを使用して画像をぼかすと、画像のエッジもぼやける場合があります。ぼかし効果を作成しながら鮮明なエッジを維持したい場合、これは望ましくない可能性があります。

この問題に対処するには、画像を

内に配置する賢明な解決策が必要です。要素とその余白を調整します。

の overflow プロパティを設定することで、非表示にするには、画像を希望のサイズにトリミングできます。

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

ログイン後にコピー

説明:

margin プロパティは画像の周囲のマージンを設定し、ぼやけたエッジを均等にオフセットします。 amount.
overflow: hidden プロパティは、画像が
の境界を越えてオーバーフローするのを防ぎ、差し込みブラーに似た効果を作成します。

例:

[ライブデモ](https://jsfiddle.net/NI3c4/)

HTML:

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

ログイン後にコピー

結果:

ぼやけた領域が

内に含まれるため、画像は定義されたエッジでぼやけます。要素。

以上がCSS3 フィルターを使用してエッジを汚さずに画像をぼかす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

前の記事：入力フィールドをコンテナの幅全体に広げるにはどうすればよいですか? 次の記事：Font Awesome アイコンをテキスト入力フィールドに統合するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。