WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス

filter 「画像に各種効果を適用」

filterは、画像に色々な加工を行うことができます。「グレースケール」「セピア」「色相回転」「階調反転」「明るさ」「コントラスト」「彩度」「ぼかし」「透過度」「影」

2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。

CSS Ver.適用要素継承
3.0全てする
広告

filterの指定方法

構文

filter : 横位置 縦位置 [ ぼかし幅 色 ];

プロパティ意味
filter: grayscale(値);グレースケール [数値,%]
filter: sepia(値);セピア [数値,%]
filter: hue-rotate(値);色相回転 [deg]
filter: invert(値);階調反転 [数値,%]
filter: brightness(値);明るさ [数値,%]
filter: contrast(値);コントラスト [数値,%]
filter: saturate(値);彩度 [数値,%]
filter: blur(値);ぼかし [pxなど]
長さ・大きさの単位参照
filter: opacity(値);透過度 [数値,%]
filter: drop-shadow(値);box-shadowと同等の指定

デフォルトはブラウザにより異なります。現在使用中のブラウザのデフォルトは「タグ毎のスタイル初期値」を参照

ページTOP

filter のサンプル

filterの指定
グレースケール
[grayscale]
セピア
[sepia]
色相回転
[hue-rotate]
階調反転
[invert]
明るさ
[brightness]
コントラスト
[contrast]
彩度
[saturate]
ぼかし
[blur]
透過度
[opacity]

2017年5月時点でIEなど一部ブラウザでは対応していませんのでご注意ください。

ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン