文字を透過させず背景画像のみ透過する方法【CSS】




こんにちは、Naya☆LogのRiku Nayaです♪

今日は、CSSで文字を透過させず背景画像のみ透過する方法を説明します!

背景画像だけ透過したいのに文字まで透過されてしまう!汗
ってなったことがある人、ちょくちょくいると思うので、その違いをまず説明していこうと思います。

文字まで透過するコード


<div class="bg-image">
  <p class="text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
</div>


.bg-image {
  background-image: url('ここに画像path');
  width: 220px;
  height: 220px;
  background-size: cover;
  opacity: 0.4;
}

背景画像のみを透過するコード


<div class="bg-image">
  <div class="bg-mask">
    <p class="bg-text">テキストが入りますテキストが入りますテキストが入りますテキストが入ります</p>
  </div>
</div>


.bg-image {
  background-image: url('ここに画像path');
  width: 220px;
  height: 220px;
  background-size: cover;
}
.bg-mask {
  height: 100%;
  background: rgba(255,255,255,0.5);
}

まとめ

bg-imageというクラスの下にbg-maskというクラスのdivタグを挟んみ、
bg-maskの”背景色”にrgbaで白の透過0.5を設定して高さを100%にします。

ただそれだけです^^ お試しあれ♪




ABOUTこの記事をかいた人

福岡出身大阪在住のウェブデザイナー。トランク☆ラボというデザインコミュニティを運営していて、そこで制作兼ディレクターもしたりしています。 新卒から5年間独立したいとひたすら思いながら会社員をしていましたが、2017.9~ようやく完全フリーランスデビュー!お仕事ください・・・。趣味は、筋トレとカメラとお酒。