CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

CSS3 で背景の透明化と不透明テキストを実装するサンプルコード

最近、画像上に半透明の背景でテキストを表示する必要があるという要件に遭遇しました。その効果は次のようになります。

要件.png

この要件を確認した後の最初の反応は、CSS3 の不透明度を使用して要素の透明度を設定することです。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>透明な背景、透明なテキスト</title>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }

        。容器 {
            幅: 600ピクセル;
            高さ: 400px;
            背景: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 繰り返しなし;
            背景サイズ: カバー;
            -webkit-background-size: カバー;
            -o-background-size: カバー;
            背景位置: 中央 0;
        }

        .デモ{
            位置: 絶対;
            幅: 260ピクセル;
            高さ: 60px;
            上: 260px;
            行の高さ: 60px;
            テキスト配置: 中央;
            背景色: 黒;
            不透明度: 0.5;
        }

        .demo p {
            色: #FFF;
            フォントサイズ: 18px;
            フォントの太さ: 600;
        }
    </スタイル>
</head>

<本文>
    <div class="コンテナ">
        <div class="demo">
            <p>2018年ワールドカップ開幕まであと10日</p>
        </div>
    </div>
</本文>

</html>

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

背景は透明で、テキストも透明です。png

これはニーズを満たしているように見えますが、完璧ではありません。不透明度を設定すると、要素全体が半透明になり、テキストがぼやけて表示されます。この解決策はお勧めできません。

実際、不透明度を設定することは、CSS で透明性を実現する唯一の方法ではありません。他に 2 つのタイプがあります:

  • CSS3 の rgba(赤、緑、青、アルファ)、アルファの値の範囲は 0 から 1 です (例: rgba(255,255,255,0.8))
  • IE 専用フィルター filter:Alpha(opacity=x)、x の値は 0 から 100 の範囲です (例: filter:Alpha(opacity=80))

ここでは RGBA を設定する方法を使用します。

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>背景は透明、テキストは不透明</title>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }

        。容器 {
            幅: 600ピクセル;
            高さ: 400px;
            背景: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') 繰り返しなし;
            背景サイズ: カバー;
            -webkit-background-size: カバー;
            -o-background-size: カバー;
            背景位置: 中央 0;
        }

        .デモ{
            位置: 絶対;
            幅: 260ピクセル;
            高さ: 60px;
            上: 260px;
            行の高さ: 60px;
            テキスト配置: 中央;
            背景色: rgba(0,0,0,0.5);
        }

        .demo p {
            色: #FFF;
            フォントサイズ: 18px;
            フォントの太さ: 600;
        }
    </スタイル>
</head>

<本文>
    <div class="コンテナ">
        <div class="demo">
            <p>2018年ワールドカップ開幕まであと10日</p>
        </div>
    </div>
</本文>
</html>

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

背景は透明、テキストは不透明.png

この設定を行うと、テキストがより鮮明に表示されます。

まとめ

実は、この要件を満たす方法は 1 つだけではありません。同じ位置に 2 つの DIV を使用し、1 つを半透明の背景の DIV、もう 1 つをテキストの DIV にすることもできます。この方法でも問題を解決できますが、絶対位置または負のマージン、および空のコンテンツを含む DIV が必要です。この方法は、次の例に示すように、一部のシナリオでは少し複雑に見える場合があります。そのため、実際の需要シナリオで具体的な問題を分析する必要があります。

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

<<:  Docker-compose チュートリアルのインストールとクイックスタート

>>:  ウェブページ要素の完全な分析

推薦する

CSS 垂直センタリングの代替実装コードの詳細な説明(非従来型)

序文ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すで...

すべてまたは逆の選択機能を実現するJavaScript

この記事では、全選択または選択を反転する機能を実現するためのJavaScriptの具体的なコードを参...

Vueでデータを読み取るためにこれを悪用しないでください

目次序文1. これを使用してデータ内のデータを読み取るプロセス2. Dep.target はいつ存在...

Hyper-V なしで Windows 10 を動作させるソリューション

Windows10 Home Edition でHyper-vを有効にする方法をまだ探していますか?...

ページング効果を実現するNode+Express

この記事では、ページング効果表示を実現するためのnode+expressの具体的なコードを参考までに...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

MySQL インデックス プッシュダウンを 5 分で学ぶ

目次序文インデックス プッシュダウンとは何ですか?インデックスプッシュダウン最適化の原理インデックス...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

Windows 10 無料インストール版の MySQL インストールと設定のチュートリアル

ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージョンと一致し...

docker-compose を使用して Clickhouse をすばやくデプロイする方法のチュートリアル

ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...

MySQLにおけるSQLの実行順序についてのちょっとした質問

今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...

MySQL v5.7.18 解凍バージョンのインストール詳細チュートリアル

MySQLをダウンロード5.1.1.1 より前のバージョン私のコンピュータは64ビットなので、Win...

Linux で AutoFs マウント サービスをインストールするチュートリアル

Samba サービスでも NFS サービスでも、サーバーの起動時にリモート共有リソースが自動的にマ...

MySQL 8.0.21 のインストール手順と問題解決

公式サイトをダウンロードまず公式ウェブサイトにアクセスしてMySQLをダウンロードしてくださいリンク...

MySQL バックアップ スクリプトの書き方

序文:データベースのバックアップの重要性は、特にデータの損失が深刻な結果を招く可能性がある実稼働環境...