デザインコード紹介

Chapter1 背景・画像・写真装飾

ロゴ画像の白背景を透過させる

更新日:

ロゴ画像の白背景を透過させるのWebデザイン画像

HTML

<div class="logo">
  <img src="logo.jpg" alt="Coffee Shop のロゴ画像">
</div>

CSS

img {
  mix-blend-mode: multiply;
}

.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(background-picture.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。