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に変換できるサイトは検索すれば簡単にみつかります。