Maison > interface Web > tutoriel CSS > le corps du texte

Exemple d'utilisation de CSS pour obtenir l'effet d'un texte translucide en arrière-plan opaque

不言
Libérer: 2018-05-09 11:05:41
original
1797 Les gens l'ont consulté

Cet article présente principalement les exemples d'implémentation CSS de l'opacité du texte translucide en arrière-plan. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Cet article présente l'implémentation CSS. . Un exemple de l'effet d'un texte translucide en arrière-plan opaque est partagé avec tout le monde, comme suit :

L'effet est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html{
                background: #6a8db1;
            }
            .aside{
                
                background-color:rgba(244,251,251,0.47);
                
                border: 1px   solid  #FFFFFF;
                width: 200px;
                text-align: center;
                color: #FFFFFF;
            }
            
            .aside p{
                height: 55px;
                border-bottom: 1px   solid   #FFFFFF;
                line-height: 55px;
                
            }
            
            .aside  p  font{
                font-weight: 800;
                
            }
            
            .aside  p  span{
                font-weight: 800;
                margin-left:18px;
            }
            
            
        </style>
    </head>
    <body>
        <p  class="aside">
            <p>
                <font>留置室1 </font >
                <span>10人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>4人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>12人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>6人</span>
            </p>
            
            <p>
                <font>留置室1 </font >
                <span>8人</span>
            </p>
            
        </p>
    </body>
</html>
Copier après la connexion

La couleur peut être ajustée en fonction de la palette

Ce qui précède est l'intégralité du contenu de cet article. Pour plus de contenu connexe. , veuillez faire attention au site Web PHP chinois.

Recommandations associées :

CSS pour réaliser des sprites et des icônes de police

CSS pour réaliser des effets dynamiques de mouvement d'entrée et de sortie de la souris

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal