塗りつぶしの透明度を指定できます
部分的に背景色を設定したい場合はbackground-colorという要素を使うことが一般的ですが、色の指定には様々な方法があります。
今回はその中でも、半透明にしてちょっと透かせるという方法をご紹介したいと思います。半透明にすることで、見た目にもスッキリしますし強すぎる色を弱めることが可能になります。
ちなみに、強すぎる色を半透明にして弱めるというテクニックは、IllustratorやPhotoshopでもよく使う方法です。
どのように記述すれば良いか
具体的にはrgbaという要素を指定します。
rgbにaを加えたものです。rgbの部分は使いたい色を10進数または％で記述し、最後の4つ目で透明度を0.0から1.0の間で指定します。4つ目の透明度はアルファ値と呼ばれ、1に近付けば近付くほど透明度が無くなります。値が小さいほど透明、ということです。
CSS
/* 赤の半透明 */
#example .example{
background-color: rgba(255,0,0,0.5)
}
/* 青の半透明 */
#example .example{
background-color: rgba(0,0,255,0.5)
}
カッコの中の数字を変えることで、自由に色や透明度を変更することができます。アルファ値に対応していないブラウザでは、rgbaによる色の指定は無視されます。
テーブルの背景色などの色分けに便利
部分的に背景色を付けたい場合や、色味を抑えたい場合に便利です。
また、サイトの背景にテクスチャーなどを使用している場合、そのテクスチャーの雰囲気を残したまま着色することができるため、重宝しています。
