Comment créer un arrière-plan transparent sans affecter l'opacité du texte dans les navigateurs ?

Comment obtenir une transparence d'arrière-plan sans affecter l'opacité du texte sur plusieurs navigateurs

Dans le développement Web, il peut être nécessaire de définir certains éléments div sur avoir des arrière-plans transparents tout en préservant l’opacité de tout texte contenu dans ces éléments. Ceci peut être réalisé grâce à une combinaison de propriétés CSS et d'effets de filtre.

Solution multi-navigateurs utilisant rgba

rgba signifie rouge, vert, bleu et alpha, où alpha représente la transparence. Voici comment utiliser rgba pour obtenir une transparence d'arrière-plan :

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

Dans cet exemple, rgba(0, 0, 0, 0.6) définit la couleur d'arrière-plan sur noir avec 60 % de transparence.

Remplacement pour Internet Explorer 6 et 7

Internet Explorer 6 et 7 ne sont pas pris en charge rgba. Pour prendre en charge ces navigateurs, vous pouvez utiliser la propriété de filtre suivante :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

Considérations supplémentaires pour IE

Dans Internet Explorer, vous devez également déclarer background: transparent pour assurez-vous que l’arrière-plan est transparent. Ceci peut être réalisé via des commentaires conditionnels ou des méthodes similaires.

Exemple d'utilisation

<div class="alpha60">
    <h1>Hello World</h1>
</div>

Référence externe

Pour plus d'informations informations, reportez-vous aux sources externes suivantes. ressource :

• http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

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!