Heim > Artikel > Web-Frontend > CSS3 erzielt den Effekt eines transparenten Hintergrunds und eines undurchsichtigen Texts

CSS3 erzielt den Effekt eines transparenten Hintergrunds und eines undurchsichtigen Texts

不言Original: 2018-06-25 15:31:045906Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode von CSS3 vorgestellt, um transparenten Hintergrund und undurchsichtigen Text zu erzielen. Ich werde ihn jetzt als Referenz verwenden.

Ich bin kürzlich auf die Anforderung gestoßen, Text mit einem durchscheinenden Hintergrund auf einem Bild anzuzeigen. Der Effekt ist wie folgt:

Requirement.png

Nachdem wir diese Anforderung gesehen hatten, bestand die erste Reaktion darin, die Transparenz des Elements mithilfe der Deckkraft in CSS3 festzulegen.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景透明，文字也透明</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            background: url(&#39;https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg&#39;) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }

        .demo {
            position: absolute;
            width: 260px;
            height: 60px;
            top: 260px;
            line-height: 60px;
            text-align: center;
            background-color: black;
            opacity: 0.5;
        }

        .demo p {
            color: #FFF;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <p class="container">
        <p class="demo">
            <p>2018世界杯已开幕：10天</p>
        </p>
    </p>
</body>

</html>

Der Effekt ist wie folgt:

Der Hintergrund ist transparent und der Text ist ebenfalls transparent .png

Dies scheint den Anforderungen zu entsprechen, ist jedoch nicht perfekt. Nach dem Einstellen der Deckkraft wird das gesamte Element durchscheinend, sodass der Text unscharf erscheint.

Tatsächlich ist die CSS-Methode zum Erzielen von Transparenz nicht die einzige Möglichkeit, die Deckkraft festzulegen. Es gibt zwei weitere Typen:

rgba(red, green, blue, alpha) von CSS3, der Wert von Alpha liegt zwischen 0 und 1, z. B. rgba(255,255,255,0,8)
IE exklusiver Filter filter:Alpha(opacity=x), der Wert von x liegt zwischen 0 und 100, wie zum Beispiel filter:Alpha(opacity=80)

Hier habe ich die Methode zum Einstellen von RGBA verwendet:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景透明，文字不透明</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 600px;
            height: 400px;
            background: url(&#39;https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg&#39;) no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-position: center 0;
        }

        .demo {
            position: absolute;
            width: 260px;
            height: 60px;
            top: 260px;
            line-height: 60px;
            text-align: center;
            background-color: rgba(0,0,0,0.5);
        }

        .demo p {
            color: #FFF;
            font-size: 18px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <p class="container">
        <p class="demo">
            <p>2018世界杯已开幕：10天</p>
        </p>
    </p>
</body>
</html>

Der Effekt ist wie folgt:

Hintergrund transparent, Text undurchsichtig.png

Nach dieser Einstellung sieht der Text viel klarer aus.

Zusammenfassung

Um diese Anforderung zu erfüllen, gibt es nicht nur diese Idee, Sie können auch zwei p an derselben Position verwenden , eines ist ein durchscheinendes Hintergrund-p und das andere ist ein Text-p, das das Problem ebenfalls lösen kann, aber eine absolute Positionierung oder einen negativen Rand erfordert, und ein p mit leerem Inhalt erscheint. Diese Methode wird in einigen Szenarien etwas kompliziert sein Im folgenden Beispiel dargestellt. Daher müssen in tatsächlichen Nachfrageszenarien bestimmte Probleme noch im Detail analysiert werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Implementierung eines linearen Farbverlaufs in CSS3

Verwenden Sie CSS3, um das Scrollen von Text in regelmäßigen Abständen nach oben zu implementieren

CSS implementiert den Menüschaltflächeneffekt mit adaptiver Breite

Das obige ist der detaillierte Inhalt vonCSS3 erzielt den Effekt eines transparenten Hintergrunds und eines undurchsichtigen Texts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Mit CSS3 wird der Text regelmäßig nach oben gescrolltNächster Artikel：Mit CSS3 wird der Text regelmäßig nach oben gescrollt

In Verbindung stehende Artikel

Mehr sehen