HTML・CSS: テキストを半透明にする
HTMLで記述するテキスト(文字)を半透明にしたい場合は、 CSSのopacityプロパティを使用します。
opacityは要素の透明度を指定するために使用し、 「0~1」の範囲で値を指定します。 「1」が不透明で「0」が完全な透明です。
理論上、半透明は「opacity: 0.5」になりますが、 文字色や背景色など サイトによって見え方は異なりますから、 実際に表示してみて値を微調整してください。
次のサンプルコードではopacityの値を複数設定して、 透明度を比較しています。
<p style="opacity: 1">opacity: 1</p> <p style="opacity: 0.75">opacity: 0.75</p> <p style="opacity: 0.5">opacity: 0.5</p> <p style="opacity: 0.2">opacity: 0.2</p>
■ 表示結果
opacity: 1
opacity: 0.75
opacity: 0.5
opacity: 0.2