CSSで半透明の背景色を実現する2つの方法について簡単に説明します。

ページをレイアウトする際、ユーザーに異なる視覚効果を与えるために、div の背景色を半透明の状態に設定する必要があります。設定方法をご存知ですか?

次に、div の背景色を半透明にする 2 つの方法と、その 2 つの方法の長所と短所について説明します。興味のある友人はぜひ見に来てください。お役に立てれば幸いです。

まず、おなじみの CSS プロパティ opacity を使用して、div の背景色を変更します。

説明する：

外側の大きな div の背景色は黄色で、内側の小さな div の背景色は赤です。次に、大きな div の背景色を半透明に設定する必要があります。不透明度属性の値を 0.5 に設定します。コードは次のとおりです。

HTML部分:

 <div class="aa">
     <divclass="bb"私はコンテンツです</div>
 </div>

CSS部分:

 .aa{
 
     幅: 250ピクセル;
     高さ: 250px; 
     背景: 黄色;             
     不透明度: 0.5;
     }
 
 .bb{ 
     幅: 150ピクセル; 
     高さ: 150px; 
     背景: 赤;
     }

効果画像:

図に示すように、背景色は半透明になりますが、その中の小さな div の背景とテキストは半透明になります。これは望んでいる効果ではない可能性があるため、通常はこの方法は使用しません。もちろん、ページレイアウト中に div 内のすべてを透明にしたい場合は、不透明度を使用します。
次に、別のメソッド、background-color:rgba(0,0,0,0~1) を使用します。このメソッドを使用すると、div 内のコンテンツに影響を与えずに、div の背景のみが透明に設定されます。
HTM 部分は同じですが、不透明度を rgba に変更するだけです。

コードは次のとおりです。

 .aa{
 
     幅: 250ピクセル;
     高さ: 250px; 
     背景色: rgba(255,255,0,0.5);
     }
 
 .bb{ 
     幅: 150ピクセル;
     高さ: 150px;
     背景: 赤; 
     }

効果画像:

画像から、大きな div の透明度を変更しても、背景や内部のテキストには影響がないことがわかります。そのため、背景色を透明に設定するには、通常、background-color:rgba(0,0,0,0~1) を使用します。

上記では、div 背景色の透明度を変更する 2 つの方法を紹介しました。それぞれに長所と短所があります。使用する具体的な方法は、ニーズに基づいて決定する必要があります。初心者は、理解を深めるために、さらに練習することができます。お役に立てば幸いです。