CSS | テキストを半透明にする方法
CSSでテキストを半透明にする方法と動作サンプルを紹介しています。
テキストを半透明にする
CSSの「opacity」プロパティを使ってテキストを半透明にする動作サンプルとサンプルコードになります。
See the Pen CSS | Translucent text by yochans (@yochans) on CodePen.
HTMLには「translucent（半透明）」というclass名を付けた<p>タグを設置しています。
<p class="translucent">Translucent Text</p>透過具合の確認のため、bodyの背景はグラデーションを指定しています。
テキストには「opacity」プロパティで透過度を設定しています。
「opacity」プロパティでの透過度は「0（完全透過）」から「1（透過なし）」の間で指定する事が可能です。
小数点「0.55」などの指定ができます。
body {
background: repeating-linear-gradient(90deg, #4169e1 0 4%, #87ceeb 4% 8%);
}
.translucent {
font-size: 50px;
font-weight: bold;
opacity: 0.5;
}