ホームページ > 記事 > ウェブフロントエンド > CSSで背景色の半透明を実現する2つの方法
ページ レイアウト中にユーザーにさまざまな視覚効果を与えるには、div の背景色を半透明の 状態に設定する必要があります。どのように設定しますか?
次に、 2 つの方法を使用して div の背景色を半透明にする方法 と、2 つの方法の長所と短所について説明します。興味のあるお友達はぜひ見に来てください。参考になれば幸いです。
推奨マニュアル: cssオンラインマニュアル
まず、おなじみのCSSプロパティopacityを使用してdivの背景色を変更します。 。
説明:
外側の大きな div の背景色は黄色、内側の小さな div の背景色は赤に設定する必要があります。半透明になります。不透明度属性値を 0.5 に設定します。コードは次のとおりです。
HTML 部分:
<div class="aa"> <div class="bb">我是内容</div> </div>
CSS 部分:
.aa{ width: 250px; height: 250px; background: yellow; opacity: 0.5; } .bb{ width: 150px; height: 150px; background: red; }
Rendering:
図に示すように、背景色は確かに半透明になっていますが、内部の小さな div の背景とテキストは半透明になっています。これは私たちが望んでいる効果ではない可能性があります。 , そのため、通常はこの方法は使用しません。もちろん、ページレイアウト中に div 内のすべてを透明にしたい場合は、不透明度を使用します。
次に、別のメソッド、background-color:rgba(0,0,0,0~1) を使用します。このメソッドを使用すると、div の背景のみが透明に設定され、div コンテンツには影響しません。
おすすめ関連記事:
1. Web デザインで CSS で背景の透明度を実現するにはどうすればよいですか? (例)
2.CSS で透明度を設定するにはどうすればよいですか?透明度を設定する 2 つの方法 (コード例)
関連ビデオ チュートリアル:
1.CSS ビデオ チュートリアル - 翡翠少女般若心経編
HTM 部分は同じですが、不透明度を rgba に変更するだけです。
コードは次のとおりです:
.aa{ width: 250px; height: 250px; background-color: rgba(255,255,0,0.5); } .bb{ width: 150px; height: 150px; background: red; }
レンダリング:
大きな div が透明になった後は一目瞭然です。が変更されても、背景と単語は影響を受けません。したがって、通常は、background-color:rgba(0,0,0,0~1) を使用して背景色を透明に設定します。
上記では、div の背景色の透明度を変更する 2 つの方法を紹介しました。それぞれに利点と欠点があります。初心者は、必要に応じて最適な方法を見つける必要があります。もっと練習して理解を深めてください。お役に立てれば幸いです。
以上がCSSで背景色の半透明を実現する2つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。