Exemple
Réglez le niveau d'opacité pour un <div> élément:
div
{
opacity: 0.5;
}
Essayez - le vous - même » Plus "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété d'opacité définit le niveau d'opacité pour un élément.
Le niveau d'opacité décrit le niveau de transparence-the, où 1 signifie pas du tout transparent, 0,5 est de 50% see-through, et 0 est complètement transparent.
| Valeur par défaut: | 1 |
|---|---|
| Hérité: | no |
| Animable: | yes, see individual properties . Read about animatable Try it |
| Version: | CSS3 |
| Syntaxe JavaScript: | object .style.opacity="0.5" Try it |
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Note: IE8 et les versions antérieures soutient une alternative, la propriété du filtre. Comme: filter:Alpha(opacity=50) .
Syntaxe CSS
opacity:number|initial|inherit;propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| number | Indique l'opacité. De 0.0 (fully transparent) à 1.0 (fully opaque) | Joue-le " |
| initial | Définit cette propriété à sa valeur par défaut. Lisez à propos initial | Joue-le " |
| inherit | Hérite cette propriété de son élément parent. Lisez à propos de hériteront |
Autres exemples
Exemple
Comment utiliser JavaScript pour changer l'opacité d'un élément:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
} Essayez - le vous - même » Pages associées
Tutoriel CSS: CSS image Opacité / Transparence
Référence HTML DOM: opacity property