編集する

CSSの画像フィルター(明るさ・透明度・コントラスト・彩度 etc)

css
html

CSSの画像フィルターのメモです。ブラウザによってフィルターが利かないものなどもあるので要確認です。

使用方法の例です。

html 使用例

<img src="/img/hogehoge.jpg" style="filter: opacity(75%);" />

実験画像です。

良く使うフィルター

明るさ

filter: brightness(200%);

100%=オリジナル。200%=2倍

50%

100%

200%

透明度

filter: opacity(75%);

0%=透明、100%=不透明

30%

70%

100%

グレースケール

filter: grayscale(100%);

0%=オリジナル、100%=グレー

50%

100%

コントラスト

filter:contrast(200%)

0%=グレー、100%=オリジナル、100%以上=高コントラスト

50%

100%

200%

その他のフィルター

彩度

filter: saturate(0%);

0%=色彩なし、100%=オリジナル、100%～=鮮やか

filter:saturate(30%);

filter:saturate(100%);

filter:saturate(200%);

セピア

filter: sepia(100%);

0%=オリジナル、100%=セピア

filter:sepia(0%);

filter:sepia(50%);

filter:sepia(100%);

ぼかし

filter: blur(1px);

0.8px

1.6px

1em

ドロップシャドウ

filter: drop-shadow(5px 5px 15px #aaa);

「x軸 y軸ぼかし半径色」で指定

0px 0px 3px #000

5px 5px 10px #aaa

色相回転

filter:hue-rotate(90deg);

0deg=オリジナル

0deg

100deg

200deg

階調反転

filter: invert(100%);

0%=オリジナル、100%=階調反転

50%

100%

画像のフィット

画像フィルターとは違いますが、object-fit:cover を使用すると、画像がつぶれずにのアスペクト比を保持したまま width や height を指定できて便利です。

120x50

150x80

html 使用例

<img src="/img/hogehoge.jpg" style="object-fit:cover;" width="100" height="100" />
<img src="/img/hogehoge.jpg" style="object-fit:cover;" width="150" height="80" />

AUTHOR

@hiropon

最終更新日 2018/09/18

FAVORITE

LINK TAG
記法を見る