Opacité en html
Résolu
Polo-WeB
Messages postés
12
Date d'inscription
Statut
Membre
Dernière intervention
-
Polo-WeB Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
Polo-WeB Messages postés 12 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Opacité en html
- Editeur html - Télécharger - HTML
- Espace en html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
3 réponses
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
- En pur CSS : ici
- Avec une image : Il suffit de créer une image 1x1px en PNG avec de la transparence
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 :
Il fonctionne sous tous les navigateurs, sauf évidement Internet Explorer.
2) filter: alpha(opacity=) en CSS
Même principe. Le code ressemble à ça :
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 :
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…)
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…)
