Maison > Article > interface Web > Comment définir la transparence de l'arrière-plan en CSS
Il existe de nombreuses façons d'obtenir la transparence de l'arrière-plan. Cet article présente les deux méthodes suivantes :
(tutoriels associés recommandés : Tutoriel CSS)
opacité de CSS3 : x, la valeur de 0 à 1, telle que rgba(255,255,255,0.8) 1. Opacité de CSS3Compatibilité : IE6, 7 et 8 ne sont pas pris en charge, mais IE9 et supérieur sont pris en charge par les navigateurs standards Instructions d'utilisation : Tous les éléments descendants de l'élément opacity seront définis pour être transparents ensemble. Il est généralement utilisé pour ajuster l'ensemble. opacité des images ou des modules.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明度</title>
<style>
.demo{
padding: 25px;
background-color:#000000;
filter:alpha(opacity:50); opacity:0.5; -moz-opacity:0.5;-khtml-opacity: 0.5;
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html>Après avoir utilisé l'opacité, l'ensemble du module sera transparent, affiché comme suit :
Ensuite, il n'est pas conseillé de le faire. utilisez l'opacité pour obtenir "un arrière-plan transparent, un texte opaque". 
Tutoriel vidéo CSS
)La couleur dite RGBA, comme son nom l'indique, est R+G+B La couleur de +A, pour être plus précis, est la couleur du rouge+vert+bleu+alpha. Traduit, c'est la couleur de la transparence rouge+vert+bleu+Alpha.background:rgba(200, 54, 54, 0.5);Parmi eux, le 0 devant 0,5 indiquant la translucidité peut être omis, ou directement .5 est également acceptable. Compatibilité : IE6, 7 et 8 ne sont pas pris en charge, mais IE9 et supérieur et les navigateurs standard sont pris en chargeComment résoudre le problème selon lequel le navigateur IE8 ne prend pas en charge rgba :
background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);Mode d'emploi : Définissez l'opacité de la couleur, généralement utilisée pour ajuster l'opacité de la couleur d'arrière-plan, de la couleur, de l'ombre de la boîte, etc.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
.demo{
padding: 25px;
background-color:#000000;/* IE6和部分IE7内核的浏览器(如QQ浏览器)下颜色被覆盖 */
background-color:rgba(0,0,0,0.2); /* IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂，但解析为透明 */
}
.demo p{
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="demo">
<p>背景透明，文字也透明</p>
</div>
</body>
</html>Utilisez rgba dans background-color Dans les navigateurs standards, l'arrière-plan est transparent et le texte est opaque, comme indiqué ci-dessous :
Utilisez ensuite rgba. pour obtenir une transparence d'arrière-plan, l'opacité du texte est souhaitable. 
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!