ホームページ > ウェブフロントエンド > CSSチュートリアル > テキストの不透明度に影響を与えずに CSS で背景色の不透明度を制御するにはどうすればよいですか?

テキストの不透明度に影響を与えずに CSS で背景色の不透明度を制御するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-12-13 09:41:14
オリジナル
141 人が閲覧しました

How Can I Control Background Color Opacity in CSS Without Affecting Text Opacity?

CSS で背景色の不透明度を制御する

CSS で不透明度プロパティを div に割り当てると、背景とその中のテキストの両方に影響します。 。ただし、テキストの不透明度を維持しながら背景色の不透明度を変更することは可能です。

rgba() 関数の使用

rgba() 関数は次の目的で使用できます。背景色と、不透明度を制御するそのアルファ チャネルを指定します。構文は次のとおりです。

background: rgba(R, G, B, A);
ログイン後にコピー
  • R、G、B は、色の赤、緑、青の値 (整数またはパーセント) を表します。
  • A 0 (透明) から 1 の範囲のアルファ チャネル値を表します。 (不透明).

例:

background: rgba(51, 170, 51, 0.6);
ログイン後にコピー

このコードは、背景色を不透明度 60% の半透明の緑色に設定しますが、div 内のテキストは完全に残ります。不透明。

ブラウザサポート

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

以上がテキストの不透明度に影響を与えずに CSS で背景色の不透明度を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート