PHPascal.com

PHPAscal rouge2 (Version bleu)


Programmation web CSS HTML PHP Jquery Javascript Wordpresse RSS SQL SSH, serveur linux Outils
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Programmation web / CSS / Ajouter des background avec transparences en CSS

Ajouter des background avec transparences en CSS

Voici le code source pour pouvoir utilisé des éléments via CSS avec des background de couleur avec transparence.

<style type="text/css">

.bg_transparent { background: rgba(255, 0, 0, 0.4); }

</style>

 

<!--[if IE]>

<style media="all" type="text/css">

/* format de couleur: hexadecimal 0xAARRGGBB format. AA alpha 00 à FF */

.bg_transparent { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FF0000,endColorstr=#66FF0000); }

</style>

 

    <![endif]-->

 

<div class="bg_transparent">

   <h1>Div avec Bg d'une couleur tranparente</h1>

   <h2>Choix d'opacicité dans FF et autre : entre 0 et 1</h2>

   <h2>Choix d'opacicité dans IE : entre 00 et FF</h2>
</div>

Le tout utilise une astuce pour IE qui ne prend pas en charge l'option CSS background: rgba pour IE 8 et IE 7. Et le remplace par l'option Gradiant qui permet de faire la transition entre 2 couleur et permet aussi la transparence.  Comme on veux juste une couleur uniforme transparente pour IE on utilise GRADIANT avec la même couleur intitial et final.

Utilisation de la même transparence pour FF et IE, voici un tableau d'équivalence

Opacité FF Opacité IE %opacité
0 00 0%
0.2 33 20%
0.4 66 40%
0.6 99 60%
0.8 CC 80%
1 00 100%

Problème avec IE si aucune largeur de défini, pour que cela fonctionne sous IE il faut absolument spécifier une largeur en pixel ou en pourcentage de l'élément a background transfarent.


Article écrit le 9 juin 2011
Article modifié le 23 novembre 2011

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0107 sec
Imprimer le 26 June 2017 - 08:19:02
par Pascal Dubreuil organisateur du Marathon de Laval