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

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 で定義されたぼかし効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？

4週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

Nordhold：Fusion System、説明

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1671

14

CakePHP チュートリアル

1428

52

Laravel チュートリアル

1329

25

PHP チュートリアル

1276

29

C# チュートリアル

1256

24

もっと見る