Maison  >  Article  >  interface Web  >  Comment rendre l'arrière-plan transparent et le texte opaque en CSS ?

Comment rendre l'arrière-plan transparent et le texte opaque en CSS ?

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-20 17:58:5412378parcourir

En CSS, vous pouvez utiliser la fonction rgba pour obtenir un arrière-plan transparent et un texte opaque. Il vous suffit de définir "rgba (valeur, valeur, valeur, valeur)" pour l'arrière-plan de l'élément ; la valeur est 0 Entre ~1, cela représente la transparence. Une valeur de 0 représente complètement transparent et une valeur de 1 représente complètement opaque.

Comment rendre l'arrière-plan transparent et le texte opaque en CSS ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Utilisez rgba en css3 :

r : rouge, prenez un entier ou un pourcentage positif ;
g : vert, prenez un entier ou un pourcentage positif
b : bleu, prenez ; un Entier ou un pourcentage positif ;
a:alpha, prends un nombre compris entre 0 et 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
    padding: 0;
    margin: 0;
}
body{
    padding: 50px;
}
.mydemo{
    padding: 25px;  
    background-color: red;
    background-color:rgba(255,0,0,0.5);
}
.mydemo p{
    color: black;
}
</style>
</head>
<body>    
    <div class="mydemo">
        <p>myIp</p>     
    </div>
</html>

Comment rendre larrière-plan transparent et le texte opaque en CSS ?

Apprentissage recommandé : Tutoriel vidéo CSS

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