[css]背景だけを透明にする方法

2018.12.06

 

ども、六崎です。

クリスマスシーズン真っ只中ですね!
オタクはガチャにイベントに大忙しです(笑)
クリスマスケーキ?…いやいや、グッズ代に回します!←

 

このシーズンはやっぱりイベント多いですよね。
ネオロマ、おれパラ、S.S.D.S、ジャンフェス、皆城総士の誕生日会…あ、あと秋アニメが終わったり、冬アニメが始まるからそのイベントとか(挙げだしたらキリがない
ちなみに私は、大学時代の先輩と一緒に遙かキャラソン祭に参加します!
最推し、高橋直純さんがいますから。

 

あと、先日Kiramune Fan Meeting in盛岡でキラフェス2019が発表されて、とても胸熱なうです!!!!
発表1時間後にFC限定でチケ応募が始まるので、発表直後広島の友達に電話して「2days行く?行くよね!よし、取るよ!」で開始直後2days応募しました。
キラフェスに関しては皆勤賞(9年連続)なので是非とも今年も行きたい!
ちなみにこれは…来年のGWのお話です(笑)

 

興奮冷めやらぬ六崎ですが、ここからはちょっと落ち着きます(深呼吸

 

 

今回は背景だけを透明にする方法、ということでopacityとrgba()を利用した方法をご紹介しようと思います。

 

まず、opacityです。
このプロパティは「要素の透明度を指定する」際に使用します。
ですので、背景も文字も透明にしたいという時には適しています。

 

では、背景だけ透明にして、文字は不透明にしたいよ!って場合はどうやるのでしょうか?

 

 

そもそも、opacityは指定要素全体(親子含め)に適応されてしまうので、文字だけ(子要素だけ)透明にしない、
ということはできないのです。

それを回避するのが、rgba()です。
rgba()は、色を指定する際に使用するのですが…これ単体では何にも起こりません。

たとえば、こんな感じで使用します。

 

 

これ、色の三原色ってやつです。
※光の三原色というのもあって、そちらはCMYKです。(六崎、紙の仕事をするまでRGBとCMYの違いが分かりませんでしたw

 

RGBの色は、0〜255まで指定できます。
Aは0(透明)〜1(不透明)で小数点で細かく指定できます。
ちなみに通常は16進数表記で指定できません。

 

rgba()のカッコの中は、カンマ区切りで1番目から「赤、緑、青、透明度」を指定しています。
透明度いらないなーって場合は、rgb()でもOKです!

 

例えば、私の大好きなオレンジ色!
16進数で表すと#ffa500になる色。
これをrgba()に当てはめると…

 

background-color: rgba(255, 165, 0, 1);

 

赤=255, 緑= 165, 青=0, 透明度=1
というようになります。

 

RGBの数値が分からないよーという方!
PhotoshopやIllustratorから確認できます。
もしくは以下のサイトに16進数の値を入れれば、簡単に分かります。

 

TECH-UNLIMiTED – カラーコード変換ツール

 

上記の方法の他に、scssを使っている方はもっと簡単な書き方があります。
先ほど「通常は16進数表記で指定できません」と言いましたが、scssの変数を利用すれば16進数でもいけます。

 

 

…と、いうような感じです。

変数で事前に$brown, $mintを指定しておき、rgbの値として変数をいれるんです。
そうすると、cssにコンパイルされる時にはrgbのそれぞれの値が0〜255の値になっているというマジック。
超便利!!
これでrgbの値を調べなくて済むんで、時短にもなります。

 

ということで、今回は要素全体ではなく、背景だけを透明にする方法をご紹介しました。
では、また!


Top