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％の最大値でセピアに変換します。 |
備考
フィルタは実験的な機能なので、-webkitという接頭辞を使用する必要があります。構文や動作が変わるかもしれませんが、変更はおそらく小さくなるでしょう。
主要ブラウザの古いバージョンではサポートされていない可能性があります。モバイルブラウザでは完全にサポートされていない可能性があります。
比較的限られたサポートのため、
filter: drop-shadow()代わりにbox-shadowを使用してみてください。filter: opacity()代わりにopacityを使用してください。Javascript / jQueryを通してアニメーション化することができます。 Javascriptの場合は、
object.style.WebkitFilter使用しobject.style.WebkitFilter。W3Schoolsには、さまざまな種類のフィルタ値のデモページもあります。
フィルタプロパティ 関連する例
This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0
This website is not affiliated with Stack Overflow
Email: tutorialpedia@outlook.com