CSSの"background-blend-mode"を使うと写真にカラーフィルタをかけたような色の加工ができる。
以下のWebページを参考にした。
使い方は、<div>で写真を入れるボックスを作成し、backgroundプロパティでオリジナル写真とカラーフィルタの色指定をして、background-blend-modeプロパティでブレンドモードを指定する。
<style>
.img-box {
width: 300px;
height: 400px;
margin: 0;
padding: 0;
display: block;
}
.color {
background: #0bd url(オリジナル写真.jpg) no-repeat; /* 色指定 */
}
.blend {
background-blend-mode: multiply; /* blend-mode 指定 */
background-size: cover;
}
</style>
<div class="img-box color blend"></div>
★ 実際に作成したブレンドモードのサンプルページが以下。
上記サンプルページの画像抜粋。↓
■ オリジナル写真
■ multiply（乗算）
■ lighten（明るく）
■ color-burn（焼き込みカラー）
■ luminosity（輝度）
■ difference（差の絶対値）
