cssで背景だけを透過する(文字は透過しない)方法
- 公開日:2013/11/22
この記事は最終更新日から10年以上が経過しています。
タイトルなどで、背景に色をつけて文字を表現する場合などに、以下のように記述すると、背景だけでなく文字も透過されてしまいます。
※上記サンプルの上段みたいになる・・・
background-color: #ff0000; filter:alpha(opacity=15); -moz-opacity:0.15; -khtml-opacity:0.15; opacity:0.15;
背景だけを透過して、上にのせる文字は透過したくないという場合はopacityを使用せず、背景の指定でrgbaを使用します。
※上記サンプルの下段
background-color: rgba(255,0,0,0.15);
RGBAカラーモデルは、RGBカラーモデルのRed、Green、BlueにAlphaが加わったものです。
Alphaは色の透明度を表します。
サンプルの場合、背景の赤色は16進数だと#ff0000ですが、RGBに変換すると(255,0,0)になります。
カラーコードを16進数からRGBに変換できるサイトは検索すれば簡単にみつかります。