子 DIV の不透明度に影響を与えずに親 DIV の不透明度を制御するにはどうすればよいですか?

子 DIV に影響を与えずに親 DIV の不透明度を制御する

Web 開発では、コンテンツの明瞭さを維持しながら透明効果を実現するのが難しい場合があります。一般的な要件の 1 つは、子 DIV の不透明度に影響を与えずに親 DIV の不透明度を設定することです。

この効果を実現するには、親 DIV 内で CSS の不透明度プロパティを利用できます。不透明度を 0 から 1 までの値に設定すると、親 DIV 内の背景コンテンツの透明度を調整できます。

例:

以下の CSS コード内、親 DIV の不透明度を 0.5 に設定します。これにより、背景の透明度が 50% になります。画像:

.parent {
  background-image: url(../images/madu.jpg);
  opacity: 0.5;
}

不透明度を使用しながら子 DIV の色を維持する

親 DIV で不透明度を設定しながら子 DIV の黒色を維持するには、次を利用します。子 DIV 内の CSS プロパティ:

.child {
  color: black;
  background-color: transparent;
}

子で背景色を透明に指定するDIV の場合、親 DIV の透明効果があっても、テキストの色はそのまま残ります。

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