CSS を使用して半透明の背景と不透明なテキストを実現する例

CSS を使用して半透明の背景と不透明なテキストを実現する例

この記事では、CSS を使用して半透明の背景と不透明なテキストの効果を実現する方法の例を紹介します。詳細は次のとおりです。

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

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="UTF-8">
        <タイトル></タイトル>
        <スタイル>
            html{
                背景: #6a8db1;
            }
            .脇に{
                
                背景色:rgba(244,251,251,0.47);
                
                境界線: 1px 実線 #FFFFFF;
                幅: 200ピクセル;
                テキスト配置: 中央;
                色: #FFFFFF;
            }
            
            .aside div{
                高さ: 55px;
                下境界線: 1px 実線 #FFFFFF;
                行の高さ: 55px;
                
            }
            
            .aside div フォント{
                フォントの太さ: 800;
                
            }
            
            .aside div span {
                フォントの太さ: 800;
                左マージン:18px;
            }
            
            
        </スタイル>
    </head>
    <本文>
        <div class="aside">
            <div>
                <font>待合室 1</font>
                <span>10人</span>
            </div>
            
            <div>
                <font>待合室 1</font>
                <span>4人</span>
            </div>
            
            <div>
                <font>待合室 1</font>
                <span>12人</span>
            </div>
            
            <div>
                <font>待合室 1</font>
                <span>6人</span>
            </div>
            
            <div>
                <font>待合室 1</font>
                <span>8人</span>
            </div>
            
        </div>
    </本文>
</html>

パレットに応じて色を調整できます

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  DockerにRedisをインストールし、設定ファイルとして起動する詳細な説明

>>:  MySQLトリガーの使用と注意すべき点

推薦する

MySQL 5.7.17 zip パッケージ バージョンを Windows 10 にインストールするチュートリアル

mysql5.7.17のインストールチュートリアルを参考までに共有します。具体的な内容は次のとおりで...

KVM 仮想化のインストール、展開、管理のチュートリアル

目次1.kvmの展開1.1 kvmのインストール1.2 kvm Web管理インターフェースのインスト...

MySQL で MHA アーキテクチャのデプロイメントを構築する手順

目次マハ1. MAHアーキテクチャの概要2. 適用可能なシナリオ3. MHAの動作原理4. MHAの...

HTML 文法百科事典_HTML 言語文法百科事典 (必読)

ボリュームラベル、プロパティ名、説明002 <! - - ... - -> コメント00...

Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォル...

MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します

目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...

Mysql を 5.7 にアップグレードした後のグループ クエリの問題を解決する

問題を見つける最近MySQLをMySQL 5.7にアップグレードした後、次のようなクエリでグループ化...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...

MySQL 日付処理関数の例の分析

この記事は主にMySQLの日付処理関数のサンプル分析を紹介します。この記事ではサンプルコードを詳細に...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

mysql8.x docker リモートアクセスの詳細な設定

目次環境条件エラーが発生しました回避策1. mysql dockerにログインする2. ルートパスワ...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

MySQL mysqladmin クライアントの使用の概要

目次1. サーバーの状態を確認します。 2. ルートパスワードを変更します。 3. mysqlser...