ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 フィルターを使用してエッジを汚さずに画像をぼかす方法
CSS3 フィルターを使用してエッジを汚さずに画像をぼかす方法
- Susan Sarandonオリジナル
- 2024-11-21 16:58:09431ブラウズ
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 サイトの他の関連記事を参照してください。
声明：この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。