filterを使用した画像の処理
![](../../img/2021/img_dummy.jpg)
※ 画像をhoverすると効果が消えます
ぼかし(blur) 3px
![](../../img/2021/img_dummy.jpg)
モノクロ(grayscale) 100%
![](../../img/2021/img_dummy.jpg)
セピア(sepia)100%
![](../../img/2021/img_dummy.jpg)
明度(brightness) 50%
![](../../img/2021/img_dummy.jpg)
明度(brightness) 150%
![](../../img/2021/img_dummy.jpg)
彩度(saturate) 50%
![](../../img/2021/img_dummy.jpg)
彩度(saturate) 200%
![](../../img/2021/img_dummy.jpg)
コントラスト(contrast) 50%
![](../../img/2021/img_dummy.jpg)
コントラスト(contrast) 200%
![](../../img/2021/img_dummy.jpg)
コントラスト 150%
+
セピア 50%
![](../../img/2021/img_dummy.jpg)
モノクロ 80%
+
彩度 80%
![](../../img/2021/img_dummy.jpg)
彩度 150%
+
明度 50%
![](../../img/2021/img_dummy.jpg)
mix-blend-mode
※ 画像をhoverすると効果が消えます
乗算
mix-blend-mode: multiply;
■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■
![](../../img/2021/img_dummy.jpg)
■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■ ■ 乗算 mix-blend-mode: multiply; ■
スクリーン
mix-blend-mode: screen;
■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■
![](../../img/2021/img_dummy.jpg)
■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■ ■ スクリーン mix-blend-mode: screen; ■
オーバーレイ
mix-blend-mode: overlay;
![](../../img/2021/img_dummy.jpg)
焼き込み
mix-blend-mode: color-burn;
■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■
![](../../img/2021/img_dummy.jpg)
■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■ ■ 焼きこみ mix-blend-mode: color-burn; ■
覆い焼き
mix-blend-mode: color-burn;
■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■
![](../../img/2021/img_dummy.jpg)
■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■ ■ 覆い焼き mix-blend-mode: color-dodge; ■
比較(暗)
mix-blend-mode: darken;
■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■
![](../../img/2021/img_dummy.jpg)
■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■ ■ 比較(暗) mix-blend-mode: darken; ■
比較(明)
mix-blend-mode: lighten;
■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■
![](../../img/2021/img_dummy.jpg)
■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■ ■ 比較(明) mix-blend-mode: lighten; ■
ハードライト
mix-blend-mode: hard-light;
■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■
![](../../img/2021/img_dummy.jpg)
■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■ ■ハードライト mix-blend-mode: hard-light; ■
ソフトライト
mix-blend-mode: soft-light;
■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■
![](../../img/2021/img_dummy.jpg)
■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■ ■ ソフトライト mix-blend-mode: soft-light; ■
差の絶対値
mix-blend-mode: difference;
■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■
![](../../img/2021/img_dummy.jpg)
■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■ ■ 差の絶対値 mix-blend-mode: difference; ■
除外
mix-blend-mode: exclusion ;
■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■
![](../../img/2021/img_dummy.jpg)
■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■ ■ 除外 mix-blend-mode: exclusion; ■
色相
mix-blend-mode: hue ;
■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■
![](../../img/2021/img_dummy.jpg)
■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■ ■ 色相 mix-blend-mode: hue; ■
彩度
mix-blend-mode: saturation ;
■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■
![](../../img/2021/img_dummy.jpg)
■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■ ■ 彩度 mix-blend-mode: saturation; ■
カラー
mix-blend-mode: color ;
■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■
![](../../img/2021/img_dummy.jpg)
■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■ ■ カラー mix-blend-mode: color; ■
輝度
mix-blend-mode: luminosity ;
■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■
![](../../img/2021/img_dummy.jpg)
■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■ ■ 輝度 mix-blend-mode: luminosity; ■