CSS3 ぼかしフィルターを使用して明確なエッジを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 ぼかしフィルターを使用して明確なエッジを実現するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-16 16:46:03

オリジナル

379 人が閲覧しました

How to Achieve Defined Edges with CSS3 Blur Filter?

CSS3 フィルターのぼかしを使用して明確なエッジを実現

画像をぼかすために CSS3 フィルターを組み込むと、視覚効果が向上します。ただし、デフォルトのぼかしフィルターは画像の境界を越えて広がるため、エッジがぼやけてしまいます。画像をぼかしながら定義されたエッジを維持するには、次の解決策を検討します。

解決策:

ぼかした画像を

で囲みます。オーバーフローのある要素: 非表示;属性により、フィルターが親要素に飛び出すのを防ぎます。さらに、 CSS3 ぼかしフィルターを使用して明確なエッジを実現するにはどうすればよいですか?

を調整すると、以下のデモコードに見られるように、マージンによりエッジがシャープに保たれます。

デモ:

[定義されたエッジとぼかしのある目的の出力の画像背景]

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

ログイン後にコピー

HTML:

<div><img src="http://placekitten.com/300" /></div>

ログイン後にコピー

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