合わせて読みたい
cssでopacityプロパティを使用して透過させようとすると、
背景だけのつもりが文字まで透明になってしまった！
ほとんどのウェブデザイナーがこの経験をすると思います。
そこを解決するのが、rgbaでの色指定です。
rgbaの使い方
[～.css]p{
color: rgba(0, 0, 0, 0.5);
}
各値は、Red, Green, Blue, alphaの順で指定します。
alphaは、透明度の指定です。opacityプロパティと同じ、透明度を0.0〜1.0までの小数点で指定します。
0.0は透明、1.0は不透明となり値が低くなるごとに透明度が上がります。
Red, Green, Blueはカラーコードではなく、0〜255の10進数で指定します。
10進数を使った色の指定は、PhotoshopやIllustratorなどのグラフィックアプリケーションでよく使われます。
最後に、カラーコードからrgbの変換例を紹介します。
- 黒 → #000000 → 0, 0, 0
- 白 → #FFFFFF → 255, 255, 255
- 赤 → #FF0000 → 255, 0, 0
- 緑 → #00FF00 → 0, 255, 0
- 青 → #0000FF → 0, 0, 255
↓こちらで変換できます。
コメントを残す