ホームページ > ウェブフロントエンド > CSSチュートリアル > 子に影響を与えずに親要素に不透明度を適用するにはどうすればよいですか?

子に影響を与えずに親要素に不透明度を適用するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-14 18:12:14
オリジナル
624 人が閲覧しました

How Can I Apply Opacity to a Parent Element Without Affecting its Child?

子に影響を与えない親要素の不透明度

元の質問では、その不透明度に影響を与えることなく親要素に不透明度を適用する解決策を求めていました。子要素。デフォルトでは、親に適用される不透明度はすべての子要素にも影響するため、これは難しい場合があります。

ただし、一般的に使用される手法には、CSS の rgba() 関数を利用することが含まれます。これにより、色を定義できます。その不透明度の値。望ましい結果を得るには、rgba() を使用して透明な不透明度値を使用して親要素の背景色を設定できます。例:

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}
ログイン後にコピー

この例では、以下に示すように、親要素の背景は 50% の透明な黒になりますが、子要素は影響を受けず、元の色を維持します。

<div class="parent">
  <div class="child">Hello, I am a child</div>
</div>
ログイン後にコピー

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

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