【CSS】rbgaとは？その活用方法、またoppacityとの違い
rgbaとは？
rgbaとは、背景色とその透明度を指定するプロパティです。rgba(Red, Green, Blue, 透明度)のように記述します。 Red, Green, Blueの部分は0~255。透明度は0.0~1.0で指定します。
例）
| 白、透明度50% | rgba(255, 255, 255, 0.5) | |
|---|---|---|
| 黒、透明度50% | rgba(0, 0, 0, 0.5) | |
| 赤、透明度50% | rgba(255, 0, 0, 0.5) | |
| 緑、透明度50% | rgba(0, 255, 0, 0.5) | |
| 青、透明度50% | rgba(0, 0, 255, 0.5) |
| 赤の十段階 | |
|---|---|
| rgba(255, 0, 0, 1) | |
| rgba(255, 0, 0, 0.9) | |
| rgba(255, 0, 0, 0.8) | |
| rgba(255, 0, 0, 0.7) | |
| rgba(255, 0, 0, 0.6) | |
| rgba(255, 0, 0, 0.5) | |
| rgba(255, 0, 0, 0.4) | |
| rgba(255, 0, 0, 0.3) | |
| rgba(255, 0, 0, 0.2) | |
| rgba(255, 0, 0, 0.1) | |
| rgba(255, 0, 0, 0) | |
活用例
こんな感じで画像の上に文字を表示する時に、文字を透過することなく、背景色を透過させることにより、文字を際立たせることができます。
gxy-life.com
oppacityとの違い
oppacityだと背景色だけでなく、文字まで透過されてしまいます。
gxy-life.com
便利なrgba変換ジェネレーター
rgba変換ジェネレーターというサイトからお気に入りの色をコピペして使えます。とても便利です。
まとめ
rgbaについて解説しました。このプロパティを駆使して、人目をひくサイトを作れるようにしたいですね。
rgba(Red, Green, Blue, 透明度)
Red, Green, Blueの部分は0~255で指定
透明度は0.0~1.0で指定
