Maison > Article > interface Web > Analyse de la différence entre l'utilisation de rgba et de l'opacité pour définir la transparence en CSS

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

不言original: 2018-06-14 16:21:202148parcourir

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);
}

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;
}

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!

Déclaration：

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

Article précédent：Comment utiliser CSS3 pour afficher plusieurs éléments en séquenceArticle suivant：Comment utiliser CSS3 pour afficher plusieurs éléments en séquence

Articles Liés

Voir plus