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 が必要です。この方法は、次の例に示すように、一部のシナリオでは少し複雑に見える場合があります。そのため、実際の需要シナリオで具体的な問題を分析する必要があります。