CSS で背景の不透明度を設定する

Rajeev Baniya 2023年2月20日
  1. CSS で opacity プロパティを使用して透明色を作成する
  2. CSS で rgba() 関数を使用して透明色を作成する
  3. CSS で 16 進値を使用して透明色を作成する
CSS で背景の不透明度を設定する

この記事では、CSS を使用して HTML で透明色を作成する 3つの方法を紹介します。CSS で背景の不透明度を設定します。

CSS で opacity プロパティを使用して透明色を作成する

opacity は、CSS で使用されるプロパティの 1つであり、特に色の場合に使用されます。0 から 1 までの値を使用して、色または要素の不透明度を示すことができます。値が 1 の場合、色が 100%不透明であることを意味します。色がまったく透明ではないことを意味します。最初に値を小さくすると、要素の透明度が高くなります。不透明度の値が 0.5 の場合、色は半透明または 50%透明になります。ただし、opacity を使用している間、子要素も透過的になります。

たとえば、見出しが h1 でクラスが transparent の HTML ドキュメントを作成します。CSS で transparent クラスを選択した後、background-color#cc33ff および opacity0.4 に設定します。見出しとその背景色をより透明にしたい場合は、不透明度の値を下げることができます。

以下の例は、opacity の値、つまり 0.4 を維持すると、背景色と見出し h1 が透明になることを示しています。

サンプルコード:

<h1 class="transparent"> Hello world </h1>
.transparent{
    background-color: #cc33ff;
    opacity: 0.4;
}

CSS で rgba() 関数を使用して透明色を作成する

rgba() 関数は、赤-緑-青-アルファモデルを使用して色を定義します。rbga() 関数の rbg は、赤、緑、青の色の値を示し、a は色の不透明度を示します。各パラメータ(赤、青、緑)は、0-255 の間の色の強度を定義します。一方、a の値は 0-1 の間にある必要があります。たとえば、rgba(255, 100, 100, 0.4)a の値が小さいほど、色は透明になります。opacity プロパティの子要素とは異なり、子要素は透明になりません。a の値が 0.5 の場合、色は半透明または 50%透明になります。

たとえば、見出しが h1 でクラスが transparent の HTML ドキュメントを作成します。見出しタグの間に Hello World というテキストを入力します。rgba() 関数を使用して、クラスに背景色を付けます。rgba の値を rgba(255, 100, 100, 0.4) として入力します。a の値を小さくして透明度を上げ、a の値を大きくして不透明度を上げます。

以下の例は、a の値を 0.4 とすると、見出しの背景色が透明になることを示しています。ただし、子要素 heading は透過的になりません。

サンプルコード:

<h1 class="transparent"> Hello world </h1>
.transparent{
    background-color: rgba(255, 100, 100, 0.4);
}

CSS で 16 進値を使用して透明色を作成する

HTML 要素に特定の色を与えるために、6 文字の後に # が続く 16 進値を使用することがよくあります。たとえば、#A5BE32。16 進値の最後に 2つの数値を追加し、8 文字の 16 進値にすることで、色を透明にすることができます。たとえば、#A5BE3280 です。ここで、#A5BE32 は色を示し、最後の 80 は色の不透明度を示します。50%の透明色が必要な場合は、16 進コードの最後に値 80 を使用できます。RGB カラーではスケールが 0-255 であるため、半分は 255/2 = 128 になり、16 進数に変換すると 80 になります。opacity プロパティの子要素とは異なり、子要素は透明になりません。

たとえば、見出しが h1 でクラスが transparent の HTML ドキュメント、つまり <h1 class="transparent">Hello world </h1> を作成します。クラスに #A5BE32 の背景色を付けます。16 進コードの最後に 80 を追加して、50%透明にします。16 進コードが #A5BE3280 になるようにします。

以下の例は、16 進コードの最後に 80 を追加すると、見出しの背景色が 50%透明になることを示しています。

サンプルコード:

<h1 class="transparent"> Hello world </h1>
.transparent{
    background-color: #A5BE3280
}

関連記事 - CSS Opacity

関連記事 - CSS Background