プログラミング

CSSで背景色や文字色を透明・透過させる方法[2パターンご紹介]

みなさんこんにちは!ワトスンです。
今回は、、

背景色を透明にしたい。文字色を透明にしたい。CSSで色を透明にすることができるの?

といった疑問に答えます。

透明・透過させる方法は2パターンありますが、それぞれ多少の違いがあるので、きちんと区別して使用していってもらえたらなと思います。

それではご紹介していきます。

背景色や文字色を透明にする方法

背景色の透明化

背景色または文字色の透明化のやり方をご紹介しますが、それぞれやり方が同じなので、今回は例として背景色の透明化をご紹介していきます。

↑上の画像のようにヘッダーの背景だけを透明にしたい時などに使用します。

具体的には以下のようにおこなっていきます。

rgba()を使用する

背景色だけを透明にするにはbackground-colorプロパティにrgbaで色と透過度を指定していきます。

↑このように値の4つ目に透過度をしていします。

rgaで色を指定したい場合は「カラーコード一覧」を参考にしてみて下さい。

最後の値で透明度を指定します。
透明度は0~1まで指定でき、0に近づくにつれ透明度は高くなっていきます。

この方法は色を指定するものならなんでも使用できるので、背景色・文字色両方でお試しください。

これがrgbaで透明化を実現する方法です。

次は少し違った方法をご紹介します。

要素を透過させる方法

次は、背景色や文字色などの色だけを透明にする方法ではなく、要素そのものを透明にする方法をご紹介していきます。

要素そのものを透過させると、要素の中の子要素も全て透明になります。

それではご紹介していきます。

opacityプロパティを使用する

要素そのものを透過させるには、「opacityプロパティ」を使用します。

このプロパティは、指定した要素を透過させることができるものです。

このように指定します。

透過度は0~1まであり、0に近づくにつれ透過度は高くなっていきます。

注意点としては、背景色や文字色だけでなくその中にある全ての要素が透過してしまうので、背景色だけ透明にしたい時などは気をつけて下さい。

以上で2パターンの透明・透過の方法をご紹介しました。

それぞれ使う用途が異なるので気をつけてご使用ください。

なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

2 件の投稿

  • ヘッダーのpcの方は透過させ
    スマホは透過させない場合どのようにCSSを書けばいいでしょうか?
    今PCの方にbackground-colorでrgbを指定していますがSPにも反映されています。
    PC、SPにopacityで調整するしかありませんか?

    • コメントありがとうございます。
      その場合、例えばpcで黒の半透明にして、spでただの黒色にする場合(透明なしにする場合)、
      pcでは、
      background-color:rbga(000,000,000,0.5);
      を指定して、
      spでは、
      background-color:rbga(000,000,000,1);
      を指定すればOKです。
      rgbaの”a”の部分が透明度の調整をする箇所なので0.5から1に変更してあげれば状況によって透明度を変更していけます。
      また、opacityで調整してしまうと背景色だけでなく、その要素に含まれているもの(文字や画像)も全て透明になるので注意が必要です。

関連記事