CSS Blend Modesつかってみよう #CSS

Photoshopで合成してもらうような要素と要素の合成だったり、
画像と色だったりの合成がCSSでもできます。べんり。

mix-blend-mode と background-blend-mode

平たく言うと、
- mix-blend-mode → img画像
- background-blend-mode →　背景画像を使いたい場合

mix-blend-mode

background-blend-mode

IE,Edgeテメーはゆるさねぇ

画像と画像、色と画像を合成したい時に使えます。

<div class="bg">
  <img src="hoge.jpg">
  <img src="moge.jpg">
</div>

.bg img {
  mix-blend-mode: overlay; //値は変えられます。今回はoverlay
}

これらが

こうなります

背景画像と背景画像、色と背景画像を合成したい時に使えます。

<div class="bg"></div>

.bg{
  background-blend-mode: darken;  // 今回はdarken
  background-image: url('hoge.jpg'), url('moge.jpg');
  background-size: cover;
}

これらが

こうなります

べんりだけど
使用上の注意をよく読み用法・用量を守って正しくお使い下さい。

おわり