HTML の 16 進コードで透明度を設定する

1. CSS Hexcode を使用して、HTML の背景に透明性を提供する
2. HTML で CSS の opacity プロパティを使用して背景を透明にする
3. HTML で CSS の background プロパティを使用して背景を透明にする

この記事では、HTML 要素に透明性を追加する方法を紹介します。CSS を使用して透明性を追加します。

CSS Hexcode を使用して、HTML の背景に透明性を提供する

CSS の 16 進コードを使用して、HTML 要素に透過性を提供できます。16 進コードを background プロパティの値として設定できます。使用する 16 進コードは 8 桁です。8 桁の 16 進コードの形式は #RRGGBBAA です。最初の 6 桁は、それぞれ赤、緑、青の 16 進コードを表します。最後の 2 桁は、不透明度の 16 進コードです。

たとえば、div を作成し、そこにテキストを書き込みます。CSS で、div を選択し、background プロパティを #00ff0080 に設定します。16 進コード #00ff00 は緑色を表し、80 は色の不透明度を表します。これにより、テキストに緑色の背景が作成され、不透明度が 50%または値 128 になります。16 進値 80 に相当する 2 進数は 128 です。したがって、16 進コードを使用して HTML で透過要素を作成できます。

サンプルコード：

<div class="light">This is some text</div>

div {
    background: #00ff0080;
}

HTML で CSS の opacity プロパティを使用して背景を透明にする

CSS の opacity プロパティを使用して、透明な背景を作成できます。このプロパティは HTML の任意の要素で使用でき、背景を透明にすることができます。opacity プロパティは、要素の不透明度を設定します。要素の背後にあるコンテンツを非表示にする度合いを設定する必要があります。値の範囲は 0.0 から 0.9 です。低い値は最低レベルの不透明度に似ており、その逆も同様です。これは、不透明度の値が 0.0 に近い場合、要素の背後にあるコンテンツがより見やすくなることを意味します。そして、内容はより透明に見えます。%表現を使用して不透明度を設定することもできます。範囲は 0%から 100%です。

たとえば、クラス bg で div を作成します。div の間の要素としてテキストを記述します。CSS で、div 要素を選択し、background-color プロパティを使用して背景を黄色に設定します。次に、クラスセレクターを使用して bg クラスを選択します。次に、opacity を 0.5 の値に設定します。

以下の例では、黄色の背景色を作成し、それにいくつかのテキストが書かれています。0.5 の不透明度の値は、要素にある程度の透明度を追加します。次の例では、値を 0.0 から 1.0 に変更して、不透明度をテストできます。そのため、チュートリアルでは背景色に透明度を追加しました。

サンプルコード：

<div class="bg">This is some text</div>

div {
    background-color: yellow;
}

.bg {
    opacity: 0.5;
}

HTML で CSS の background プロパティを使用して背景を透明にする

opacity プロパティを使用することには欠点があります。親要素に設定された opacity 値は、すべての子要素に適用されます。この問題を取り除くために、CSS の background プロパティを使用できます。要素に rgba 値を指定して、子要素に不透明度が適用されないようにすることができます。background プロパティは、rgba() 関数を使用して、不透明度で RGB カラーを指定します。関数の構文を以下に示します。

rgba(red, green, blue, alpha)

RGB 値の強度は 0 から 255 の範囲で指定できます。0 から 100%の範囲のパーセンテージ値を表すこともできます。最初の方法で説明したように、alpha の値を指定できます。

最初のメソッドのコード例に CSS の変更を加えます。div の選択で、background-color プロパティを削除し、background プロパティを追加します。プロパティの値として rgba() 関数を記述します。赤の値を 255 に設定し、緑と青に 0 を設定します。alpha 値を 0.2 と記述します。次に、bg クラスの選択を削除します。

以下のコードスニペットは、テキストに赤い背景を作成し、ある程度の透明性を追加します。

コード例：

<div class="light">This is some text</div>

div {
 background:rgba(255,0,0, 0.2)
}