CSSで要素の背景色だけを透明にすることはできますか?

CSS の不透明度をテキストを除く背景色に制限することは可能ですか?

CSS では、不透明度プロパティによって要素の透明度が制御されます。ただし、テキストには影響を与えずに要素の背景色のみに不透明度を適用したい場合があります。

問題:

ご覧のとおり、単に背景プロパティの不透明度を設定するだけでは、目的の結果が得られません。

解決策:

望ましい結果を達成するには、rgba() 関数を利用できます。この関数を使用すると、赤、緑、青、アルファの 4 つのチャネルを通じて要素の色と不透明度を指定できます。

rgba() の構文は次のとおりです。

rgba(R, G, B, A)

ここで:

• R、G、B はそれぞれ、色の赤、緑、青の成分を表します。これらの値は、整数またはパーセンテージとして指定できます。
• A は、要素の透明度を制御するアルファ チャネルを表します。値 0 は完全な透明度に対応し、値 1 は完全な不透明度に対応します。

たとえば、テキストの不透明度を維持しながら要素の背景を部分的に透明にするには、次のようにします。次のコードを使用します:

background: rgba(51, 170, 51, 0.6);

このコードでは、rgba() 関数を使用して、60% の明るい緑色の背景を指定します。不透明度。テキストの色は、この不透明度調整による影響を受けません。

2018 年現在、rgba() 構文は事実上すべての主要なブラウザでサポートされています。

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