Rendre l'arrière-plan HTML d'un texte ou d'une images semi-transparent en CSS
La solution la plus moderne est l'utilisation de CSS3. La dernière version du langage CSS, supportée par les navigateurs récents.
Il est possible de rendre un élément HTML semi-transparent pour que le texte soit plus facilement visible par l'internaute. Il y a plusieurs solutions qui s'appliquent à des navigateurs plus ou moins récents selon leur compatibilité avec le langage CSS (autre astuce sur la même thématique : Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?).
La solution la plus moderne est l'utilisation de CSS3. La dernière version du langage CSS, supportée par les navigateurs récents, intègre la notation rgba, qui permet de préciser une couleur à partir des couleurs primaires (rouge, bleu et vert) et qui comporte aussi l'alpha, c'est-à-dire la transparence de la couleur. Cette transparence doit avoir une valeur comprise entre 0 et 1.
#idDeMonElement
{
background-color:rgba(255,0,0,0.5); //Donne la couleur rouge transparent à l'élément
}
Cette propriété n'est pas supportée par les versions d'Internet Explorer antérieures à la version 9. Pour toutes ces versions, il existe un filtre qui est utilisé pour créer des dégradés d'arrière-plan. En utilisant la propriété transparence présente dans le code couleur, puis en attribuant la même couleur pour l'origine et la fin du dégradé, on peut afficher une couleur transparente. La transparence est précisée dans le code hexadécimal de la couleur, au format #AARRGGBB. Il faut noter que pour les versions d'Internet Explorer antérieures à la version 8, les filtres propriétaires s'utilisent avec la notation filter alors que pour la version 8, on utilise la notation -ms-filter:
#idDeMonElement
{
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FF0000, endColorstr=#77FF0000); //IE 5.5 à 7
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77FF0000, endColorstr=#77FF0000); //IE 8
}