ブレンドモード

Web

2024年2月15日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はCSSの「mix-blend-mode」を触ってみたいと思います。

参考：MDN｜mix-blend-mode

参考：ICS MEDIA｜CSSのブレンドモードが素敵！mix-blend-modeを使いこなそう

・画像と文字を用意する

・mix-blend-mode

・まとめ

画像と文字を用意する

まずは画像を用意して、その上に文字を乗せてみます。

Sydney Harbour Bridge

オーストラリアのシドニー・ハーバーブリッジの画像です。
今更気づいたのですがharborではなくharbourなんですね。イギリス英語でしょうか。

<div class="wrapper">
  <div><img src="images/Harbour_bridge.jpg" alt="ハーバーブリッジ" class="w-100"></div>
  <div class="text">Sydney Harbour Bridge</div>
</div>

.wrapper {
  width: 100%;
  position: relative;
}

.wrapper .text {
  max-width: 80%;
  max-height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: rgba(255, 0, 0, 0.7);
  padding: 25px 50px;
  font-size: min(10vw, 80px);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  mix-blend-mode: normal;
}