シャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

シャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-16 14:10:03

オリジナル

307 人が閲覧しました

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

CSS3 フィルターのぼかしを使用して定義されたエッジを実現する

CSS フィルタープロパティを使用して画像にぼかし効果を適用すると、次のような一般的な問題が発生します。画像の端もぼやけてしまいます。これは、特に鋭い線や詳細を保持する必要がある場合に、望ましくない結果を招く可能性があります。

この問題を解決し、定義されたエッジを維持するには、賢い技術を使用できます。ぼかした画像を

内に配置することで、要素を使用し、特定の 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;
}

ログイン後にコピー

このコードでは、< ;画像>要素は

内に含まれています。オーバーフローを非表示に設定した場合。これにより、ぼかした画像が

の端でトリミングされ、周囲へのぼかし効果の波及がなくなります。

さらに、負のマージンがシャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか? に適用されます。要素を使用して、

内でわずかに移動します。これらのマージンの値を調整して、エッジを維持しながら必要な量のぼかしを作成できます。

このテクニックは、定義されたぼかし効果を効果的に作成し、画像のエッジをシャープに保ちながら、内部の細部を柔らかくします。

以上がシャープなエッジを維持しながら、CSS3 で定義されたぼかし効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：Webkit ブラウザのカラー入力ボックスをカスタマイズするにはどうすればよいですか? 次の記事：ファイルリンクパラメータはどのようにしてキャッシュを防ぐのでしょうか?

このウェブサイトの声明

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

著者別の最新記事