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

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を使用して録音をテキストに変換する機能を実現

>>:  役に立つメタ設定方法(必読)

推薦する

CSS3 3Dクールキューブ変形アニメーションの実装

私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...

MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策

1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...

HTML フォームを送信するいくつかの方法_PowerNode Java Academy

方法1: 送信ボタンから送信する <!DOCTYPE html> <html>...

MySQLのネストされたトランザクションで発生する問題

MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....

MySQL トランザクション分析

取引トランザクションはビジネス ロジックの基本単位です。各トランザクションは一連の SQL ステート...

Linux での scp および sftp コマンドの詳細な説明

目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

60件のページング事例と優れた実践例を推奨

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

Vueはボールのスライディングクロス効果を実現します

この記事の例では、ボールのスライドとクロスの効果を実現するためのVueの具体的なコードを共有していま...

JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

目次コードの実行に長い時間がかかる場合はどうなりますか? Axiosにはタイムアウト処理機能が搭載さ...

MySQL 5.7 でルートパスワードを変更する方法

MySQL 5.7 以降では、多くのセキュリティ更新が追加されました。旧バージョンのユーザーは慣れて...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

MySQLの論理アーキテクチャに関する深い理解

MySQL は現在、ほとんどの企業や事業体で使用されているデータベースです。MySQL が使用される...

dns-prefetch とは何ですか? フロントエンドの最適化: DNS の事前解決によりページ速度が向上します

目次背景1. dns-prefetch とは何ですか? 2. dns-prefetch を設定するに...

JS が WeChat の「クソ爆弾」機能を実装

みなさんこんにちは、Qiufengです。最近、WeChatは新しい機能をリリースしました(WeCha...