Maison > Article > interface Web > Comment définir la transparence en CSS sans affecter les éléments enfants ? Compatible avec toutes les méthodes d'écriture du navigateur

Comment définir la transparence en CSS sans affecter les éléments enfants ? Compatible avec toutes les méthodes d'écriture du navigateur

云罗郡主avant: 2018-10-18 15:58:223498parcourir

Le contenu que cet article vous apporte porte sur ce sujet et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Comment définir la transparence en CSS sans affecter les éléments enfants ? Compatible avec toutes les méthodes décriture du navigateur

<body>
<p style="background-color:rgba(0,255,0,0.2);"> 显示文字 
</p> 
</body>

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.
Les trois premières valeurs sont les valeurs de couleur RVB, et la dernière valeur de transparence varie de 0 à 1. Plus la valeur est petite, plus elle est transparente.

Compatible avec tous les navigateurs Écriture :

background-color:rgba（0,0,0,0.25）；
filter:progid:DXImageTransform.Microsoft.Gradient（startColorstr=#40000000,endColorstr=#40000000）；

Remarque : Pour les valeurs de startColorStr et endColorStr, les deux premiers chiffres sont en transparence hexadécimale, et le dernier six chiffres sont de 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 et BB spécifie la valeur bleue, voir les unités 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.

Méthode de conversion pour une transparence à 2 chiffres : x=alpha*255, convertissez simplement le résultat calculé x en hexadécimal.

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 : la définition de la transparence pour la saisie n'affecte pas les éléments enfants (compatible avec IE8)

<!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 l'introduction complète, si vous souhaitez en savoir plus Pour plus d'informations sur les tutoriels vidéo CSS, veuillez faire attention au site Web PHP chinois.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Explication sur l'utilisation de l'attribut clip-path en CSS (avec code)Article suivant：Explication sur l'utilisation de l'attribut clip-path en CSS (avec code)

Articles Liés

Voir plus