no-image

色・透明化

rgba/RGB色指定と透明化

RGBと透明度。

結果

 
 
 
 
 
 

解説

rgbaの内わけは、rgba(赤,緑,青,透明度)です。
透明度は0.0~1.0で変化します。例題では、わかりやすくグラデーションにしていますが、
半透明にしたい時に使うのが理想的です。

hsla/HSL色指定と透明化

HSLと透明度。

結果

 
 
 
 
 
 

解説

hslaの内わけは、hsla(色相,彩度,明度,透明度)です。

基本的にrgbaと変わりませんが、色相以外の彩度・明度はパーセントで指定する必要があり、その点に置いてはrgbaの方が使いやすいかと思います。

透明度は0.0~1.0で変化します。例題では、わかりやすくグラデーションにしていますが、背景を半透明にしたい時に使うのが理想的です。

liner-gradient/グラデーション

背景グラデーションと角度

結果

 

解説

liner-gradientは、ブラウザによって若干書き方が異なります。

Chrome等のwebkitブラウザでは基本的に、横位置(left、center、right、%、px)、縦位置(top、center、bottom、%、px)の順で始まり、色を加えるごとにカンマで区切ります。

opacity/透明度

透明度。

結果

透明度:0.2
透明度:0.6
透明度:1.0

解説

opacityは、単純に透明化する指定です。

rgba等とおなじく、指定方法は0.0~1.0の間になります。