Je n'utilise pas CSS3. Je ne peux donc pas utiliser les attributs opacity
ou filter
. Sans utiliser ces attributs, comment puis-je rendre transparente la couleur d'arrière-plan d'une subdivision ? Cela devrait ressembler à l'exemple de la zone de texte dans ce [lien][1]. Ici, la couleur de fond de la zone de texte est transparente. Je veux faire la même chose, mais sans utiliser les attributs mentionnés ci-dessus.
[1] : http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency
Le problème de l'"opacité" est qu'elle affecte également le contenu, alors que souvent vous ne voulez pas que cela se produise.
Si vous voulez simplement que votre élément soit transparent, il suffit de :
background-color: transparent;
Mais si vous voulez qu'il soit en couleurs, vous pouvez utiliser :
background-color: rgba(255, 0, 0, 0.4);
Ou définir une image de fond (1px
par 1px
) enregistrée avec le bon alpha
.
(Pour ce faire, utilisez Gimp
, Paint.Net
ou tout autre logiciel d'image qui vous permet de faire cela.
Il suffit de créer une nouvelle image, de supprimer le fond et d'y mettre une couleur semi-transparente, puis de l'enregistrer en png).
Comme l'a dit René ;, la meilleure chose à faire serait de mélanger les deux, avec le rgba
en premier et l'image 1px
par 1px
comme solution de repli si le navigateur ne supporte pas l'alpha :
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
Voir aussi : http://www.w3schools.com/cssref/css_colors_legal.asp.
Démo : [Mon JSFiddle](
)L'opacité vous donne la translucidité ou la transparence. Voir un exemple [Fiddle here][1].
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
Remarque : [il ne s'agit PAS de propriétés CSS3][2].
Voir [http://css-tricks.com/snippets/css/cross-browser-opacity/] [3]
[1] :
[2] : http://www.w3schools.com/css/css_image_transparency.asp [3] : http://css-tricks.com/snippets/css/cross-browser-opacity/transparent est la valeur par défaut de background-color.
[http://www.w3schools.com/cssref/pr_background-color.asp][1]
[1] : http://www.w3schools.com/cssref/pr_background-color.asp