「ヘッダーを透過させたい！」
と考えている人の中には、ヘッダー全体だけではなくヘッダーのうちのヘッダー背景色だけ消したい・半透明にしたいと考えている方もいらっしゃるかもしれません。
「半透明と言えばopacity！」
と、グーグル検索でも出るのでopacityを追加cssにルンルンで入れる方も多いことでしょう。
しかしopacity、ヘッダー全体が半透明になっちゃいます。
ロゴも薄くなるため「こんなはずでは！」となっちゃう場合もあるのでは？
ということで。
前置き長くなりましたが、今回は背景色のみ消すまたは半透明にする方法を紹介します。
目次
背景を消すならtransparent
背景を消すならtransparentを使いましょう。
指定するのもとても簡単！
.指定のクラス{
background-color: transparent;
}これだけです。
要は背景色の部分にtransparent;と入れちゃえばいいだけですね。
背景色だけ半透明にしたいrgbaを指定しましょう
「背景色を消すんじゃなくて半透明にしたい！」
という場合はrgbaを指定してあげましょう。
rgbaはなんだろ、#000みたいなカラーコードとはまた別の、透明度も指定できるコードみたいなやつです。
ここでは黄色の半透明を指定したい、ということにしてコードを見てみましょう↓
.指定のクラス{
background-color: rgba(255,245,85,0.35);
}コードペンで試しに指定した例を書いてみましたよ↓
See the Pen Untitled by 白石ゆめこ (@katati_ca) on CodePen.
これだけ！チョー簡単ですね。
このrgbaは「カラーコードからrgbaへ変換するツール【css】」で取得できます。
変換ツール色々ありますが、この変換ツールが一番楽で簡単でした。ブックマークおすすめですよ。
