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 および opacity 値 0.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
}