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トリガーの使用と注意すべき点

推薦する

Vueスロットの実装原理についての簡単な説明

目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...

CSSを使用してダークモードとブライトモードを切り替える

Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...

Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する

1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...

JavaScript ES6 分割演算子の理解と応用

目次序文脱構築記号の役割使い方分割割り当ての適用アプリケーションの簡単な紹介JSONデータを抽出する...

MySQLのREDOログとUNDOログの詳細な説明

MySQL ログ システムで最も重要なログは、REDO ログとアーカイブ ログです。後者は MySQ...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

Vueの最初のプログラムを書くための勉強ノート

目次1. HTMLを書く、最初のVueプログラムビューテンプレートとデータに注意してください決定ルー...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

Reactの二次連携を実現する方法

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

Ubuntu環境でのSSHの詳細なインストールと使用

SSH は Secure Shell の略で、安全な伝送プロトコルです。Ubuntu クライアントは...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化（​​つまり、すべてのデータがオンラインで完了し、インポートや...

IE8 互換性について: X-UA-compatible 属性の説明

問題の説明:コードをコピーコードは次のとおりです。 <meta http-equiv=&quo...

Vue で $props、$attrs、$listeners を使用する方法の詳細な説明

目次背景1. 文書の説明2. 特定の用途結論背景ここで、状況について説明しましょう。親コンポーネント...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

データベース管理に役立つ 5 つの MySQL GUI ツール

MySQL には多くのデータベース管理ツールがあります。作業効率の向上に役立つ優れた GUI ツール...