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 チュートリアルのインストールとクイックスタート

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

推薦する

Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

インタビュアー: Vue のソースコードを読んだことはありますか?応募者:あります。インタビュアー:...

ウェブページを作るときに知っておくべきいくつかのスキル

1. IE6 では z-index が無効です。 CSS では、階層を変更するために z-index...

ApacheとTomcatによるクラスタ環境構築プロセスの分析

実際、Apacheクラスタを構築するのは難しくありません。私もインターネットで情報を見つけて自分で設...

mysql インストーラ コミュニティ 8.0.12.0 インストール グラフィック チュートリアル

このチュートリアルでは、参考のためにmysqlインストーラコミュニティ8.0.12.0のインストール...

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

Typescriptを使用してローカルストレージをカプセル化する方法

目次序文ローカルストレージの使用シナリオ使用上の問題解決機能性有効期限を追加データ暗号化を追加する命...

自動検索提案機能のスタイルファイルを入力します: suggestion.css

コードをコピーコードは次のとおりです。 .sugLayerDiv{位置:相対; overflow:h...

CSS最適化スキルの自己実践体験

1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...

Windows 10 と MySQL 5.5 のインストールとインストールなしの使用の詳細なチュートリアル (画像とテキスト)

この記事では、Windows 10環境でのMySQL 5.5のインストールと使用方法を紹介します。リ...

Ubuntu 16.04 で Python 3 を使用して Django プロジェクトを作成し、実行する方法

ステップ1: Djangoプロジェクトを作成するターミナルを開き、書き込みたいプロジェクトのアドレス...

コンテンツの位置をランダムにドラッグするHTMLを実装する2つの方法

テスト: Chrome v80.0.3987.122 は正常です方法は2つあります。通常のラベルの位...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

Windows/Mac で Docker を使用して MySQL (utf8 を含む) をインストールする

目次1. MacへのDockerのインストール2. Win 10 システムでの Docker のイン...