CSS3 obtient l'effet d'un arrière-plan transparent et d'un texte opaque-tutoriel CSS-php.cn

CSS3 obtient l'effet d'un arrière-plan transparent et d'un texte opaque

不言

Libérer： 2018-06-25 15:31:04

original

5944 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'exemple de code CSS3 pour obtenir un arrière-plan transparent et un texte opaque. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

J'ai récemment rencontré une obligation d'afficher du texte avec un fond translucide sur une image. L'effet est le suivant :

Requirement.png

Après avoir vu cette exigence, la première réaction a été d'utiliser l'opacité en CSS3 pour définir la transparence de l'élément.

<!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>

Copier après la connexion

L'effet est le suivant :

Le fond est transparent et le texte est également transparent.png

Cela semble répondre aux besoins, mais ce n'est pas parfait. Après avoir défini l'opacité, l'élément entier devient translucide, ce qui rend le texte flou. Cette solution n'est pas recommandée.

En fait, la méthode CSS pour obtenir la transparence n'est pas le seul moyen de définir l'opacité. Il existe deux autres types :

rgba(red, green, blue, alpha) de css3, la valeur de alpha est de 0 à 1, comme rgba(255,255,255,0.8)
Filtre de filtre exclusif IE :Alpha(opacity=x), la valeur de x est comprise entre 0 et 100, comme filter:Alpha(opacity=80)

Ici j'ai utilisé la méthode de réglage rgba :

<!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>

Copier après la connexion

L'effet est le suivant :

L'arrière-plan est transparent et le texte est opaque.png

Après avoir défini cela, le texte semble beaucoup plus clair.

Résumé

En fait, pour réaliser cette exigence, il n'y a pas seulement cette idée, vous pouvez aussi utiliser deux p dans la même position , l'un est un arrière-plan translucide p et l'autre est un texte p, ce qui peut également résoudre le problème, mais cela nécessite un positionnement absolu ou une marge négative, et un p avec un contenu vide apparaît. Cette méthode sera légèrement compliquée dans certains scénarios, car. illustré dans l'exemple suivant. Par conséquent, dans les scénarios de demande réelle, des problèmes spécifiques doivent encore être analysés en détail.

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Implémentation d'un dégradé de couleurs linéaire en CSS3

Utilisation de CSS3 pour implémenter le défilement du texte vers le haut à intervalles réguliers

CSS implémente un effet de bouton de menu à largeur adaptative

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!