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

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

ブログ    

推薦する

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

MySQL 5.7.17 圧縮パッケージのインストール不要の構成プロセス図

MySQL データベース管理ソフトウェアには、エンタープライズ エディションとコミュニティ エディシ...

Linux でテキストから改行文字を削除する方法

復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

Zabbix は DingTalk のアラーム機能を画像付きで設定します

実装のアイデア:まず、アラーム情報にはitemidが必要です。これは前提条件です。情報に渡されるパラ...

vuex ベースのショッピングカート機能の実装

この記事の例では、ショッピングカート機能を実装するためのvuexの具体的なコードを参考までに共有して...

Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – ...

LED を使って Linux カーネルを使い始める方法を探る

目次序文LEDトリガー探索を始めるLEDデバイス登録LEDディレクトリ類推によって理解するクラスディ...

Linux 占有ポートの強制解放と Linux ファイアウォールのポート開放方法の詳しい説明

nginx、mysql、tomcat などのサービスをインストールするときに、使用する必要があるポー...

HTMLにおけるbackground-image属性の設定の詳細な説明

写真といえば、まず背景画像が思い浮かびます。私たちの装飾の多くは背景画像を使用して実現されているから...

Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析

序文:この記事は、jackyzm のブログ https://www.cnblogs.com/jack...

Vue は動的なプログレスバー効果を実現します

この記事では、動的なプログレスバー効果を実現するためのVueの具体的なコードを例として紹介します。具...

ウェブページの広告デザインにおけるウェブデザインの寸法とルール

1. 800*600 未満の場合、Web ページの幅が 778 以内であれば、水平スクロール バーは...

MySQL で誕生日から年齢を計算する複数の方法

以前はMySQLをあまり使用していなかったため、MySQLの機能にあまり詳しくありませんでした。この...