0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

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

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

見本(右のみCSSで乗算にした結果)
sample.png

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

ソース

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さえいなければ・・・

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?