Opacité en html Résolu/Fermé

Question

Salut tout le monde, j'aimerais savoir si il était possible (je sais que oui j'ai déjà vue quelque part) de mettre une opacité sur l'arriére plan de body en html ou en css. Merci

avion-f16 · Answer

Il y a plusieurs techniques :
- En pur CSS : ici
- Avec une image : Il suffit de créer une image 1x1px en PNG avec de la transparence

le hollandais volant · Answer

Salut !

En CSS c'est tout à fait possible.

4 solutions. Toutes 4 avec ses défauts et ses avantages :

1) opacity en CSS 2
Principe : un div avec en css :
div {
   opacity: 0.5;
   } se vera avec son contenu devenir transparent à 50%
Il fonctionne sous tous les navigateurs, sauf évidement Internet Explorer.

2) filter: alpha(opacity=) en CSS
Même principe. Le code ressemble à ça :
div {
    filter: alpha(opacity=50); 
   } 
Le div sera opaque à 50%.
Ceci est non officiel pour le W3C mais marche dans tous les navigateurs.

3) Le RGBA CSS3
Le RGBA permet de rendre la couleur d'un élement en transprent, et uniquement la couleur en question (pas le contenu donc)
Principe d'utilisation :
div {
    background-color: rgba(255,128,0,0.5);
   } 
Ici, le div aura un fond transparent à 50%, et uniquement le fond. C'est une composante ajoutée en plus sur les couleurs.
C'est du CSS3 qui est supporté par tous les navigateurs actuels sauf Internet Explorer.

4) une image de fond semi-transparente
tout est dans le titre. L'image doit être au format PNG ou GIF pour avoir de la transparence (pas jpg en tout cas)


Exemple : ici on voit que en haut, seul le fond est transparent (on a ça avec le RGBA) et en bas, tout est transparent. (fond, bordure, contenu…)

Polo-WeB · Answer

Merci vous deux :) Sujet résolu mais si vous avez d'autre proposition n'hésitez pas a en faire part ;)

Opacité en html

3 réponses

Discussions similaires