Comment définir la transparence en CSS sans affecter les éléments enfants-tutoriel CSS-php.cn

Comment définir la transparence en CSS sans affecter les éléments enfants

王林

Libérer： 2020-08-11 16:56:30

avant

3236 Les gens l'ont consulté

Comment définir la transparence en CSS sans affecter les éléments enfants

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>

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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!