CSSフィルタープロパティは、ぼやけ、明るさ、グレースケールなどの効果を備えた簡単な畫像スタイリングを可能にします。フィルター：畫像または背景畫像にフィルター機能（値）を使用します。一般的な機能には、Blur（PX）、輝度（％）、コントラスト（％）、グレースケール（％）、飽和（％）、および色相（Deg）が含まれます。複數(shù)のフィルターを1つのルールで組み合わせて、スペースで區(qū)切ることができます。フィルターは、グレースケールの畫像をインタラクションで色にするなど、トランジションを使用してホバー上でアニメーション化することもできます。これにより、ファイルを手動で編集することなく、強力で動的な畫像効果が提供されます。
CSSを使用して畫像にフィルターを適用することは、フィルタープロパティを使用してシンプルで効果的です。これにより、畫像の視覚的な外観をブラウザで直接変更することなく、手動で編集することなく変更できます。
フィルタープロパティの基本的な構文
フィルターCSSプロパティは、ぼかし、輝度調整、色のシフトなどのグラフィカル効果を適用します。任意の畫像要素（ IMG 、バックグラウンド畫像など）で動作します。
img {フィルター：フィルター機能（値）;
}
スペースで區(qū)切られた1つまたは複數(shù)のフィルター関數(shù)を一度に使用できます。
一般的なフィルター関數(shù)と例
広くサポートされているフィルター関數(shù)とそれらの使用方法は次のとおりです。
- Blur（PX） - ガウスブラーを追加します。値が高いということは、より多くのぼやけを意味します。
例：フィルター：Blur（3px）; -
明るさ（％） - 輝度を調整します。 100％は変化がないことを意味し、暗くは明るくなります。
例：フィルター：明るさ（60％）; -
コントラスト（％） - コントラストを変更します。 100％は変更されていません。
例：フィルター：コントラスト（200％）; - Grayscale（％） - 畫像を灰色の色合いに変換します。 100％は完全にグレースケールです。
例：フィルター：グレースケール（100％）; -
飽和（％） - 色の強度を調整します。 100％を超えると飽和が増加します。
例：フィルター：飽和（150％）; -
色相（deg） - カラーホイールの周りの色を回転させます。
例：フィルター：Hue-Rotate（90Deg）;
複數(shù)のフィルターを組み合わせます
それらを一緒にリストすることで、いくつかのフィルターを一度に適用できます。
img {フィルター：明るさ（70％）コントラスト（130％）飽和（120％）;
}
これにより、輝度がわずかに軽減され、コントラストが増加し、色の飽和が高まります。
ホバーにフィルターを使用します
一般的な用途は、インタラクティブ効果のためにホバー上のフィルターを変更することです。
img {フィルター：グレースケール（100％）;
遷移：0.3sの容易さをフィルター。
}
IMG：ホバー{
フィルター：Grayscale（0％）;
}
これにより、グレースケールの畫像がフルカラーになり、滑らかな移行でフルカラーになります。
基本的に、フィルタープロパティは、CSSのみを使用して畫像スタイリングを強力に制御できます。デザインのニーズに合った関數(shù)と価値を選択するだけです。
以上がCSSを使用して畫像にフィルターを適用する方法の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Stock Market GPT
AIを活用した投資調査により賢明な意思決定を実現(xiàn)
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
純粋なCSSを使用してドロップダウンメニューを作成する方法
Sep 20, 2025 am 02:19 AM
HTMLとCSSを使用して、JavaScriptなしでドロップダウンメニューを作成します。 2。：Hover Pseudo-Classを介してSubmenuディスプレイをトリガーします。 3.ネストされたリストを使用して構造を構築し、CSSに非表示および吊り下げのあるディスプレイ効果を設定します。 4。視覚的なエクスペリエンスを向上させるために、トランジションアニメーションを追加できます。
畫像がCSSで伸びたり縮小したりするのを防ぐ方法
Sep 21, 2025 am 12:04 AM
useObject-fitormax-widthwithheight：autotopreventimagedistortion; object-fitcontrolshowimagesfillcontainersは、asspectratios、andmax-width：100％; height：autoensuressivescaling withoutwithoutstretching。
CSSでポインターイベントプロパティを使用する方法
Sep 17, 2025 am 07:30 AM
pointer-events-eventsporpertyincssconstrolswhethernelementcanbetheTarget ofpointerevents.1.usepointer-events：nonetodisable interactionsionsionsionsionslikeclicksoversoverseepingtheelementはviseallyvisible.2.applyittooclaallowcliclowcliclavioturtuntowontuntuntointuentointyonelemenmen
CSSでボックスシャドウエフェクトを追加する方法
Sep 20, 2025 am 12:23 AM
usethebox-shadowpropertytoaddropshadows.definehorizo??ntalandaldverticalOffsets、blur、spread、color、andoptionalinsetforinnershadows.multipleshadowsarecomma-separated.example：box-shadow：5px10px8pxrgba（0,0,0,0.3）;
CSSを使用して畫像にフィルターを適用する方法
Sep 21, 2025 am 02:27 AM
thecsssfilterpropertyallowseasyimageStylingwithectslikeblur、brightness、andgrayscale.usefilter：filter-function（value）onimagesorbackgroundimages.commonfunctionsincludeblur（px）、輝度（％）、造影（％）、graycal（％）、hue（％）
CSSにグラデーションの背景を追加する方法
Sep 16, 2025 am 05:30 AM
CSS勾配の背景を追加するには、背景または背景イメージ屬性を使用して、linear-gradient（）、radial-gradient（）などの関數(shù)と協(xié)力します。最初に勾配の種類を選択し、方向と色を設定すると、線形勾配（Toright、＃FF7E5F、＃FEB47B）などの色のドッキングポイント、形狀、サイズ、その他のパラメーターを介して細かく制御できます。
CSSグリッドレイアウトでギャップを作成する方法は？
Sep 22, 2025 am 05:15 AM
GAP、ROW-GAP、または列-GAP屬性を使用して、CSSGRIDレイアウトのグリッドアイテム間の間隔を作成します。ギャップは、1つまたは2つの長さの値を受け入れることができる行間隔を設定するための略語屬性です。 row-gapと列ギャップは、行と列間の間隔、およびPX、REM、％などのサポートユニットを個別に制御します。
CSSのレスポンシブタイポグラフィにclamp（）関數(shù)を使用する方法
Sep 23, 2025 am 01:24 AM
clamp（）関數(shù)は、最小値、優(yōu)先値、最大値を介して応答性のあるフォントスケーリングを実現(xiàn)します。 2。構文はクランプ（最小値、優(yōu)先値、最大値）であり、一般的に使用されるREMおよびVWユニットです。 3.フォントは、小さな畫面で最小値を取得し、畫面が増加するとVWに従ってスケールを使用し、最大値を超えません。 4.數(shù)値を合理的に選択して、読みやすさを確保し、大きすぎたり小さすぎたりしないようにします。 5。REMタイプの割合を組み合わせて、設計の一貫性を改善します。
