CSS要素の背景だけを透明にするにはどうすればよいですか?

CSS 不透明度を使用して背景色のみをターゲットにする

CSS では、要素の透明度を制御するために不透明度プロパティがよく使用されます。ただし、背景の上にあるテキストではなく、背景の不透明度を具体的にターゲットにすることは可能です。

rgba 関数

この透明度の制御を実現するには、 rgba() 関数を使用できます。 rgba() 関数は 4 つのパラメータを取ります:

• R: 赤の値 (整数またはパーセンテージ)
• G: 緑の値 (整数またはパーセンテージ)
• B:青色の値 (整数またはパーセンテージ)
• A: アルファ値 (0 と 1 の間の数値、またはパーセント)

アルファ値 (A) は透明度を表し、0 は完全に透明、1 は完全に不透明です。

使用例

次の CSS コードは、rgba() 関数を使用して、テキストを残したまま div の背景を透明にする方法を示しています。影響なし:

div {
  background: rgba(51, 170, 51, 0.4); /* 40% opaque green background */
}

このコードは、div に 40% の透明な緑色の背景を割り当て、その上のテキストがはっきりと見えるようにします。

ブラウザのサポート

2018 年現在、rgba() 構文は最新のブラウザーで広くサポートされています。ただし、CSS 機能を運用環境に展開する前に、ブラウザーの互換性を確認することを常にお勧めします。

以上がCSS要素の背景だけを透明にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。