WEB講座

mix-blend-modeで重ねた要素をおしゃれに表示

2022.04.20

今回はちょっと、お洒落なテクニックを紹介するぞよ！

へっぽこ講座としては珍しいですね。

うむ。CSSブレンドモードのmix-blend-modeというものを説明していくぞよ。

名前がすでにお洒落ですね～^^

mix-blende-modeは、要素同士を重ね合わせた時に、どのように表示するかを設定するプロパティです。

値はたくさんありますが、今回は以下の背景画像とロゴに
multiply、luminosity、color-burnを使用してみたいと思います。

基本のHTMLとCSS

.hoge{
background: url(hoge_bg.jpg);
}

左からそれぞれmultiply、luminosity、color-burnをあててみます。

.hoge .multiply{
mix-blende-mode: multiply;
}

.hoge .luminosity{
mix-blende-mode: luminosity;
}

.hoge .colorBurn{
mix-blende-mode: color-burn;
}

白背景がついているjpg画像場合、いくつかの値では背景を消したり、ロゴを透明に抜くことができるので、必要に応じて使用してみるのもいいです。

【通常の場合】

↓先ほどのように【左からmultiply、luminosity、color-burnをあてた場合】

このようにjpg画像から白背景を消したり（左右のロゴ）、ロゴを透明に切り抜いた感じにできます（真ん中のロゴ）。

mix-blende-modeは、IE以外のChrome、Edge、safari、Firefoxなど、主なブラウザで対応されているので安心して利用できます。

今回はいつもより専門的でしたね！

今までこの記事を書いてた人が、限界を感じてスタッフさんに書かせるようになったからじゃのぅ。

あの人は、知識はあるけどスキルがないですからね！

それは言わないでおいてあげるのが優しさじゃT T