Couleur d'arrière-plan transparente en CSS
- Utiliser RGBA pour définir la couleur d’arrière-plan et la transparence dans CSS
- Créer une couleur d’arrière-plan transparente en CSS
Les composants d’arrière-plan peuvent être vus depuis un autre élément supérieur de la page grâce à la couleur transparente du CSS. Les attributs background-color peuvent être utilisés pour rendre les couleurs transparentes.
En CSS, aucune propriété appelée background-opacity n’est utilisée pour modifier l’opacité ou la transparence de l’arrière-plan d’un élément sans impacter d’autres composants tels que les polices de caractères. Si vous essayez d’y parvenir avec la propriété CSS opacity, cela modifiera également l’opacité de tous les autres composants.
Nous allons vous montrer comment changer la couleur de fond transparente en CSS avec quelques exemples.
Utiliser RGBA pour définir la couleur d’arrière-plan et la transparence dans CSS
Vous pouvez utiliser la couleur RGBA, qui intègre la transparence alpha dans le cadre de la valeur de couleur introduite dans CSS 3. Comme le montre l’exemple suivant, la couleur RGBA peut être utilisée pour modifier la couleur de l’arrière-plan et sa transparence.
Exemple de code :
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
Créer une couleur d’arrière-plan transparente en CSS
Pour créer une couleur de fond transparente, utilisez le code couleur CSS RGBA(). L’effet est utile pour donner l’apparence et la convivialité à l’élément si vous souhaitez rendre l’arrière-plan du texte visible aux visiteurs pour afficher l’image de fond.
Exemple de code :
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>