Comment puis-je rendre l'arrière-plan d'un div transparent tout en gardant le texte opaque dans tous les navigateurs ?

Effets d'opacité sur la couleur d'arrière-plan sans impacter le texte

Atteindre la transparence dans l'arrière-plan d'un div tout en conservant un texte opaque nécessite une solution multi-navigateurs qui aborde Internet Explorer 6.

Pour accomplir cela sans externe bibliothèques :

• Utiliser rgba : Les valeurs RGBa permettent de spécifier la transparence (opacité) en plus des valeurs de couleur.

.alpha60 {
    background-color: rgba(0, 0, 0, 0.6);
}

• Contrer le comportement d'IE : Internet Explorer nécessite des filtres supplémentaires pour prendre en charge RGBa transparence.

.alpha60 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

• Gérer l'héritage d'arrière-plan d'IE : Pour éviter que l'opacité ne soit héritée par les éléments enfants dans IE, déclarez background: transparent. Il est préférable de le faire en utilisant des commentaires conditionnels.

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!