Maison > Article > interface Web > Comment définir la transparence en CSS sans affecter les éléments enfants
Comment définir la transparence en CSS sans affecter les éléments enfants
- 王林avant
- 2020-08-11 16:56:303168parcourir
Définissez la transparence via RGBA. Seuls les derniers navigateurs le prennent en charge. Il prend en charge IE9+ et peut être défini via le canal alpha de RGBA.
(Tutoriel recommandé : Tutoriel CSS)
<body> <div style="background-color:rgba(0,255,0,0.2);"> 显示文字 </div> </body>
Les trois premières valeurssont les valeurs de couleur RVB et la dernière valeur de transparence est 0~1. Plus il est petit, plus il est transparent.
Compatible avec tous les navigateurs Écriture :
background-color:rgba(0,0,0,0.25); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
Remarque : Les deux premiers chiffres des valeurs de startColorStr et endColorStr sont une transparence hexadécimale et les six derniers chiffres sont une couleur hexadécimale.
Il a le format #AARRGGBB. AA, RR, GG et BB sont des entiers positifs hexadécimaux. La plage de valeurs est 00 - FF.
RR spécifie la valeur rouge, GG spécifie la valeur verte, BB spécifie la valeur bleue, voir unité de couleur #RRGGBB. AA spécifie la transparence. 00 est complètement transparent. FF est complètement opaque. Les valeurs en dehors de la plage de valeurs seront restaurées à la valeur par défaut.
(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)
Méthode de conversion pour une transparence à 2 chiffres : x=alpha*255, convertissez le résultat calculé x en hexadécimal. Il suffit de faire il.
Méthode de conversion JS en hexadécimal : x.toString(16)
Par exemple : la transparence de 0,25 ci-dessus, convertie en transparence AA d'IE : var a = 0,25 * 255 = 63,75 ~= 64 ; a.toString(16) = 40
Exemple :
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:0;padding:0;}
.div_content{
background: url("1.gif") no-repeat;
/*给input框添加背景图片，以凸显其透明效果。*/
width: 200px;
height: 200px;
}
.div_content>input{
outline: none;
border: none;
background-color: transparent;
/*必须将背景色设为透明，否则无效。（除非对于要设置的元素本身已经是透明的，如：span元素等）*/
background-color: rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
}
</style>
</head>
<body>
<div class="div_content">
<input type="text" size="20"/>
</div>
</body>
</html>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!