LoginSignup
1

More than 5 years have passed since last update.

rgbaで背景色を半透明にする方法

Posted at

ヘッダーの背景色を半透明にしたらかっこいいなと思い調べて見ました

RGBAとは?
赤(R)緑(G)青(B)にアルファという透過度という情報を加えたもの
RGBは1~255の数値で色を指定し、A(透明度)は0(完全に透明)~1(不透明)という数値で指定します。

example.rb
background: rgba(10,10,100,0.2);

スクリーンショット 2019-03-01 18.38.48.png

こんな感じの青透明なヘッダーができました。

rgbaで半透明にするメリット

opacityでも半透明にすることができるが、中のテキストも透過するらしい

rgbaなら背景色のみを透過できるというメリットがある

参考

RGBA値で背景を半透明にする
CSS:CSS3の「rgba()」で背景色を透過する方法

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1