More than 3 years have passed since last update.

WEBサイトで「乗算」を再現？IE非対応でいいならCSSできるよ

Posted at 2020-11-24

どうも7noteです。忌々しい乗算に悩まされない日が近づいています。

WEBデザインで一番困るといっても過言ではない「乗算」。
現状全てのブラウザに対応するための一般的な方法は存在しません。

そのためコーダーは透明度や色合いなどで微調整するしかなかったのですが、
実はIEを無視すれば乗算に対応することができます！

見本（右のみCSSで乗算にした結果）

このように、薄い背景であれば白背景付きのロゴ画像でも色付きの場所になじませて配置することが可能なんです。

index.html

<div class="bg">
  <img src="logo.png">
  <img src="logo.png" class="mbm">
</div>

style.css

.bg {
  background: #fdd;
  padding: 10px;
}

.bg .mbm {
  mix-blend-mode: multiply;      /* 「乗算」する */
}

本日の主役「mix-blend-mode: multiply;」です。
何度も言いますがmix-blend-modeはIEに非対応です。

ですがそれさえ無視すれば、乗算にしたい要素にmix-blend-mode: multiply;を記述するだけなので非常に簡単に実装することができます。
mix-blend-modeは他にもさまざまな加工ができるので使ってみてください。

あぁ。IEさえいなければ・・・