どうも、ソエです。

今回は、変わったCSSプロパティ、mix-blend-modeプロパティについて紹介していきます。

では、どうぞ。

mix-blend-modeとは

フォトショップのレイヤー効果のようなCSSで、背景色と要素の色を混ぜることができます。

イラストツールのアイビスでいう、合成モードです。

値の種類

どんな値が設定できるのか、どんな風になるのか見ていきます。
コードは以下の通りで、mix-blend-mode以外は統一しておきます。

HTML

<div>
<img src=”画像URL”>
</div>

CSS

div{
background:#333;
}

img{
mix-blend-mode:nomal;
}

nomal

ブレンドしない、初期値です。

multiply

screen

darken

lighten

color-dodge

color-burn

hard-light

soft-light

difference

exclusion

hue

saturation

color

luminosity

initial

inherit

unset

終わりに

いかがでしたか?

かなり面白いですが、使いどころを見極めて使ってみて下さい。

では、ご閲覧ありがとうございました。

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

色をブレンドさせるmix-blend-modeまとめ