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

Analyse de la différence entre l'utilisation de rgba et de l'opacité pour définir la transparence en CSS

不言
Libérer: 2018-06-14 16:21:20
original
2165 Les gens l'ont consulté

Cet article présente principalement deux méthodes de réglage de la transparence en utilisant rgba et l'opacité en CSS, et explique la différence entre les deux à travers des exemples pratiques. Les amis dans le besoin peuvent s'y référer

1 .Utilisez rgba. pour définir la couleur d'arrière-plan pour qu'elle soit transparente

L'effet est le suivant :

<body>
    <p id="box">
        你好啊!
    </p>
</body>
body {
    background-color:red;
}
#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgba(182,255,0,.5);
}
Copier après la connexion


2. Utilisez l'opacité pour définir la couleur d'arrière-plan pour qu'elle soit transparente

#box{
    width:200px;
    height:200px;
    margin:100px auto;
    text-align:center;
    line-height:200px;
    color:white;
    background-color:rgb(182,255,0);
    opacity:0.5;
}
Copier après la connexion

Résumé : En comparant les effets des deux, nous avons constaté que l'opacité affectera également la transparence de la police

Ce qui précède est la différence et l'explication détaillée entre les deux. J'espère que cela sera utile à tout le monde ~~

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

Recommandations associées :

Comment utiliser CSS pour étirer et remplir l'image d'arrière-plan afin d'éviter un affichage répété

Comment utiliser CSS3 pour implémenter plusieurs éléments en séquence Afficher

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!

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