テキストの背景色を半透明にしつつ、文字色は不透明にするCSS - スタイルシートTipsふぁくとりー

《2017年6月25日 13:00 公開/更新》 テキストの背景色を半透明にしつつ、文字色は不透明にするCSS [CSS3,テキスト,色] スタイルシートを使って対象の要素を半透明にしたい場合(透明度を指定したい場合)はopacityプロパティを使えば良いだけです。テキストでも画像でも半透明になります。しかし「対象の要素の全体」が半透明になってしまいます。そうではなく、「背景色は半透明にして背後を少しだけ透過させたいが、文字色は不透明にしてハッキリ見えるようにしたい」という場合もあるでしょう。その場合はRGBAカラーモデルでの色指定を使うと望みの配色が作れます。 テキストの背景色を半透明にしつつ、文字色は不透明にしたい場合もある ▼背景色は半透明だが、文字色は不透明にした例 ▼背景色も文字色も合わせて半透明にした例 背景色も文字色も合わせて半透明にしたければ、opacityプロパティ 背景

[scarlett_sanshiru]

背景半透明　文字そのまま

[riocampos]

背景色は半透明で文字色は不透明のままならばbackground-color: rgba、背景色も文字色も半透明ならばopacity。