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 サイトの他の関連記事を参照してください。