Looking for css Answers? Try Ask4KnowledgeBase
Looking for css Keywords? Try Ask4Keywords

CSSフィルタプロパティ


構文

  • フィルタ:なし(デフォルト値)
  • filter:initial(デフォルトはnone);
  • フィルタ:継承(デフォルトは親の値);
  • フィルタ:blur(px)
  • フィルター:明るさ(数値|%)
  • フィルター:コントラスト(数値|%)
  • フィルタ:ドロップシャドウ(水平シャドー-px垂直シャドウ-pxシャドウ - ブラー-pxシャドウ - スプレッドカラー)
  • フィルタ:グレースケール(数値|%)
  • フィルタ:hue-rotate(deg)
  • フィルタ:反転(数値|%)
  • フィルタ:不透明度(数値|%)
  • フィルタ:飽和(数値|%)
  • フィルター:セピア(数値|%)

パラメーター

説明
ぼかし(x) 画像をxピクセルだけぼかします。
明るさ(x) 1.0または100%を超える値で画像を明るくします。その下に、画像が暗くなります。
コントラスト(x) 1.0または100%を超える任意の値で画像にコントラストを与えます。それ以下では、画像の飽和度が低くなります。
ドロップシャドウ(h、v、x、y、z) イメージにドロップシャドウを与えます。 hとvは負の値を持つことができます。 x、y、zはオプションです。
グレースケール(x) 画像をグレースケールで表示します。最大値は1.0または100%です。
色相 - 回転(x) 画像に色相回転を適用します。
反転(x) 画像の色を最大値1.0または100%で反転します。
不透明度(x) 画像の不透明/透明度を最大値1.0または100%で設定します。
飽和する(x) 1.0または100%を超える任意の値でイメージを飽和させます。その下に、画像は飽和し始めます。
セピア(x) 画像を1.0または100%の最大値でセピアに変換します。

備考

  1. フィルタは実験的な機能なので、-webkitという接頭辞を使用する必要があります。構文や動作が変わるかもしれませんが、変更はおそらく小さくなるでしょう。

  2. 主要ブラウザの古いバージョンではサポートされていない可能性があります。モバイルブラウザでは完全にサポートされていない可能性があります。

  3. 比較的限られたサポートのため、 filter: drop-shadow()代わりにbox-shadowを使用してみてください。 filter: opacity()代わりにopacityを使用してください。

  4. Javascript / jQueryを通してアニメーション化することができます。 Javascriptの場合は、 object.style.WebkitFilter使用しobject.style.WebkitFilter

  5. 詳細についてはW3SchoolsまたはMDNを確認してください。

  6. W3Schoolsには、さまざまな種類のフィルタ値のデモページもあります。

フィルタプロパティ 関連する例