CSSで背景色を透明に設定するにはどうすればよいですか? CSSで背景色の透明度を設定する2つの方法の紹介

Web ページのレイアウトでは、Web ページ全体の美しさを高めるために、Web ページの一部の背景色を透明に設定する必要がある場合があります。では、背景色を透明に設定するにはどうすればよいでしょうか。この記事ではCSSを使って背景色を透明にする方法を紹介します。

CSS で背景色の透明度を設定するには 2 つの方法があります。 1 つは rgba を通じて設定する方法で、もう 1 つは backgroud と opacity を通じて設定する方法です。

CSS で透明な背景色を実現するためのこれら 2 つのメソッドの具体的な例を見てみましょう。

1 背景色と不透明度を使用して背景色を透明に設定します。

background 属性の属性値は比較的単純なので、ここでは詳しく説明しません。css 学習マニュアルを参照して学習してみましょう。ここで opacity 属性について簡単に見てみましょう。

opacity 属性パラメータの「不透明度」は、0.0 から 1.0 の範囲の数値で表されます。透明は 0.0、完全に不透明は 0.0 1.0、つまり、数値が大きいほど要素の不透明度が高くなります。 「不透明度」パラメータに加えて、継承もあります。 親レイヤーのプロパティを継承しますが、ブラウザのサポートが不十分であるため、推奨されません。

2 つの属性の概要を読んだ後、backgroud と opacity を使用して背景色の透明度を設定する具体的な例を見てみましょう。

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

<div class="box"></div>

.box{
  width:300px; 
  height:200px; 
  margin:0 auto; 
  border:1px solid #ccc; 
  background:red; 
  opacity:0.2;  
}

背景色は透明です。 効果は次のとおりです。

手順: 背景にテキストがある場合、背景と不透明度で背景色の透明度を設定します。以下の効果のように、透明にもなります

したがって、このメソッドを使用して背景色を透明に設定するかどうかは状況によって異なります。

おすすめ関連記事:
1. Web デザインで CSS で背景を透明にする方法 (例)
2.CSS で背景色を半透明にする 2 つの方法#3.
CSSで透明度を設定するにはどうすればよいですか?透明度を設定する 2 つの方法 (コード例) 関連ビデオ チュートリアル:
1.
CSS ビデオ チュートリアル - 翡翠少女般若心経編

2. rgba メソッドで背景色を透明に設定する

いわゆる RGBA カラーは、RGB の 3 原色に ALPHA を加えたものです。背景に色を追加しながら、透明度のプロパティを提供します。

使用法:background:rgba(R,G,B,A);

rgba を使用して背景色の透明度を設定する具体的な例を見てみましょう:

<div class="title_div">背景颜色透明</div>

.title_div{ 
  width: 200px;
        height: 200px; 
        line-height: 30px;
        text-align: center;
         margin:0 auto;
         background-color:rgba(220,38,38,0.2);
}

rgba メソッドで背景色の透明度を設定する効果は次のとおりです。

説明: rgba メソッドで背景色の透明度を設定すると、背景色を透明に設定し、テキストは不透明になりますが、このメソッドの互換性は制限されています。いいえ、IE ブラウザとは互換性がありません。

CSS の詳細については、php 中国語 Web サイトを参照してください。

css ビデオ チュートリアル 、 css3 ビデオ チュートリアル 、css 学習マニュアル 、および css3 学習 マニュアルをさらに学習してください。

以上がCSSで背景色を透明に設定するにはどうすればよいですか? CSSで背景色の透明度を設定する2つの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。