CSS でテキストの不透明度を変更する

1. CSS の opacity プロパティを使用して、CSS のテキストの透明度を変更する
2. CSS でテキストの透明度を変更するために rgba() 関数を使用する

この記事では、CSS でテキストの不透明度を変更する 2つの方法を紹介します。

CSS の opacity プロパティを使用して、CSS のテキストの透明度を変更する

opacity プロパティは、要素の透明度を示します。通常、0 から 1 のスケールで示されます。0 は完全に透明です。

それはそれが完全に見えないことを意味します。同様に、1 は完全に不透明であり、0.5 は 50％透けて見えるため、要素の不透明度のベンチマークと見なすことができます。

たとえば、p 要素を作成し、その前にクラスを作成します。p 要素内に選択したテキストを入力します。

次に、クラス after で同様の p 要素を作成します。CSS でクラス before を選択し、テキストの色として red を指定します。

after クラスでは、色を red に設定し、opacity プロパティを 0.4 に設定します。必要に応じて、0 から 1 のスケールで設定します。

同様に、要素の不透明度をパーセンテージで示すこともできます。0%は完全に透明で、100%は完全に不透明です。0.4 の代わりに 40%を使用することもできます。

サンプルコード：

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

CSS でテキストの透明度を変更するために rgba() 関数を使用する

一般に、rgba() 関数は、要素に色を挿入するために使用されます。rgba() の文字は、赤、緑、青、およびアルファを表します。

これは、関数が 4つの値を取ることを示しています。alpha オプションは、要素の opacity を示す拡張機能です。

赤、青、または緑の色の強度は、0 から 255 または 0％から 100％の整数として示すことができます。opacity には、0-1 の値と、もちろん 0%-100%の範囲を指定できます。

color プロパティのオプションとして rgba() 関数を使用できます。

デモでは、上記の最初の例と同じ HTML テンプレートを使用します。クラス before を選択し、CSS の color プロパティに rgba() 関数を記述します。

関数に値 0, 0, 255 を書き込みます。これは青色のカラーコードです。after クラスに同じカラーコードを使用しますが、不透明度の値に 0.5 を追加します。

その結果、最初のテキストは青色で表示され、2 番目のテキストは不透明度を設定するため不透明度が低くなります。

サンプルコード：

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

したがって、すべての事実を考慮して、opacity プロパティと rgba() 関数を使用してテキストの透明度を変更しました。