divの背景を透明に設定する方法の例

div の背景を透明にする一般的な方法は 2 つあります。

1. 不透明度属性を 0 ～ 1 の値に設定します。0 は透明、1 は不透明です。ただし、この方法では div 上のコンテンツも透明になります。

効果は以下のとおりです。

ここに画像の説明を挿入

2. 背景色を RGBA 形式で設定します。形式は background-color:rgba(0,0,0,0~1) で、0 は透明、1 は不透明を意味します。

ここに画像の説明を挿入

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

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        .id{
            幅: 600ピクセル;
            高さ: 300px;
        
        }
        .tm1{
            マージン: 40 自動;
            テキスト配置: 中央;
            行の高さ: 200px;
            幅: 800ピクセル;
            高さ: 200px;
            背景色: 黄色;
            不透明度: 0.6;
        }
        .tm2{
            マージン: 40 自動;
            テキスト配置: 中央;
            行の高さ: 200px;
            幅: 800ピクセル;
            高さ: 200px;
            背景色: rgba(255, 255, 0, 0.5);
        }
    </スタイル>
</head>
<本文>
    <!--背景 div-->
    <div class="id">
    <!--透明なdivメソッド1-->
    <div class="tm1">透明な div 方法 1、不透明度によって透明度を設定し、div 上のテキストも透明になります: opacity: 0.6;</div><br>
    <!--透明なdivメソッド2-->
    <div class="tm2">透明な div メソッド 2、RGBA で透明度を設定します。div 上のテキストは透明ではありません: background-color:rgba(255,0,0,0.5);</div>
</div>
</本文>
</html>

もう一つ注目すべき点があります:
rgba() 関数は、赤 (R)、緑 (G)、青 (B)、透明度 (A) の重ね合わせを使用して、さまざまな色を生成します。

RGBA は、Red、Green、Blue、Alpha (英語: Red、Green、Blue、Alpha) の略です。
赤 (R) 色の赤の成分を表す 0 ～ 255 の整数。。
緑 (G) 色の緑の成分を表す 0 ～ 255 の整数。
青 (B) 色の青の成分を表す 0 ～ 255 の整数。
透明度（A）は0～1の間の値を取り、透明度を表します。
Baidu百科事典でRGBA値を検索できます。
類似:

ここに画像の説明を挿入

カラーコード比較表のリンク:
https://www.sioe.cn/yingyong/yanse-rgb-16/ より

div 背景の透明度を設定する例に関するこの記事はこれで終わりです。より関連性の高い div 背景の透明度コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: UniappはBaidu Voiceを使用して録音をテキストに変換する機能を実現

>>: 役に立つメタ設定方法（必読）