Sur cette page, vous apprendrez comment modifier l'opacité de l'arrière-plan d'un élément sans affecter les éléments enfants ou le contenu du texte en utilisant les couleurs RGBA de CSS ?
Comment modifier l'opacité de l'arrière-plan d'un élément sans affecter les éléments enfants ou le contenu du texte ?
Par : TutorialsGrey, le 11 Novembre 2022
Il n'existe pas de propriété CSS comme "background-opacity" que vous pouvez utiliser uniquement pour modifier l'opacité ou la transparence de l'arrière-plan d'un élément sans affecter ses éléments enfants. En revanche, si vous essayez de le faire à l'aide de la propriété CSS opacity, l'opacité de l'arrière-plan sera modifiée, mais aussi celle de tous les éléments enfants.
Dans de telles situations, vous pouvez utiliser la couleur RGBA introduite en CSS3, qui inclut la transparence alpha dans la valeur de la couleur. En utilisant la couleur RGBA, vous pouvez définir la couleur de l'arrière-plan ainsi que sa transparence, comme le montre l'exemple suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
body {
background-image: url("/examples/images/pattern.jpg");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the text content.</p>
</body>
</html>
Résultat
Vous connaissez à présent comment modifier l'opacité de l'arrière-plan d'un élément sans affecter les éléments enfants ou le contenu du texte en utilisant les couleurs RGBA de CSS. Vous pouvez également utiliser les images PNG transparentes pour obtenir cet effet.
