css,rgba表記

背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記
冒頭の例のように、背景色には透明度を指定して背後を透かせつつ、文字色には透明度を指定せずに不透明な色を指定したい場合には、opacityプロパティではなく、色の指定にRGBAカラーモデルを使うと良いでしょう。
例えば以下のようにCSSソースを記述します。
CSSソース
span {
   background-color: rgba( 204, 255, 204, 0.55 );
   color: blue;
}

にしし ふぁくとりー
http://www.nishishi.com/css/text-opacity-rgba.html






《2017年6月25日 13:00 公開/更新》
テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,色]
スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)はopacityプロパティを使えば良いだけです。
テキストでも画像でも半透明になります。
しかし「対象の要素の全体」が半透明になってしまいます。
そうではなく、「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合もあるでしょう。
その場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。
    テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある
        ▼背景色は半透明だが、文字色は不透明にした例
        ▼背景色も文字色も合わせて半透明にした例
    背景色も文字色も合わせて半透明にしたければ、opacityプロパティ
    背景色は半透明にするものの、文字色は不透明にしたいなら、rgba表記
テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある
スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)は、opacityプロパティを使えば良いだけです。
テキストでも画像でも半透明になります。簡単です。
しかし、その場合は対象の要素の全体が半透明になってしまいます。
テキストを掲載する場合の色指定には主に「背景色」と「文字色」の2つがあります。(他に、枠線色などもありますが。)
このうち、
    背景色は半透明にして、背後を少しだけ透過させたいが、
    文字色は不透明にして、背後は透過しないようにしたい
という場合もあるでしょう。
文字の読みやすさを重視する場合には、文字そのものは透過しない方が良いかも知れませんから。
例えば、以下のサンプルでは、背景色の緑色は40％ほど透明になっていますが、
文字色の青色は不透明(＝まったく透過しない青色)になっています。

にしし ふぁくとりー
http://www.nishishi.com/css/text-opacity-rgba.html




16進数カラーコード・RGB・RGBA変換ツール
16進数形式のカラーコードを入力すると
RGB・RGBA形式に変換します。　

16進数カラーコード・RGB・RGBA変換ツール
http://j-press.info/16torgba/