mozilla
Vos résultats de recherche

    opacity

    Résumé

    La propriété CSS opacity définie la transparence d'un élément, c'est à dire, le degré d'arrière-plan qui est visible.

    Utiliser cette propriété avec une valeur différente de 1 place l'élément dans un nouveau contexte d'empilement.

    • Valeur initiale 1.0
    • S'applique à tous les éléments
    • Héritée non
    • Pourcentages
    • Média visual
    • Valeur calculée la valeur spécifiée, écrêtée à l'intervalle [0,1]
    • Animable oui, comme un nombre
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    opacity:  <alphavalue>
    

    Valeurs

    <alphavalue>
    Est un <number> compris entre 0.0 et 1.0, les deux extrémités incluses, représentant l'opacité du canal, qui est la valeur de son canal alpha. N'importe quelle valeur à l'extérieur de l'intervalle, bien que valide, est rapporté à l'extrémité la plus proche dans l'intervalle.
    Valeur Signification
    0 L'élément est complètement transparent (c'est-à-dire, invisible).
    N'importe quel <number> strictement entre 0 et 1 L'élément est translucide (c'est-à-dire que l'arrière-plan est visible).
    1 L'élément est complètement opaque.

    Exemples

    hbox.example {
      opacity: 0.5; /* on voit l'arrière-plan au travers de hbox */
    }
    

    Exemple de compatibilité entre navigateurs

    pre {                               /* rend la boîte translucide (opaque à 20%) */
       border: solid red;
       opacity: 0.2;
       filter: alpha(opacity=20);       /* IE8 et précédents */
       zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
    }
    
    pre {                               /* rend la boîte translucide (opaque à 50%) */
       border: solid red;
       opacity: 0.5;
       filter: alpha(opacity=50);       /* IE8 et précédents */
       zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
    }
    
    pre {                               /* rend la boîte translucide (opaque à 80%) */
       border: solid red;
       opacity: 0.8;
       filter: alpha(opacity=80);       /* IE8 et précédents */
       zoom: 1;       /* définir "zoom", "width" ou "height" pour déclencher "hasLayout" dans IE 7 et précédents */ 
    }
    

    Opacités différentes grâce à :hover

    <html>
    <head>
    <style>
    img.opacity {
       opacity: 1;
       filter: alpha(opacity=50);
       zoom: 1;
     }  
     
    img.opacity:hover {
       opacity: 0.5;
       filter: alpha(opacity=100);
       zoom: 1;
     }
    </style>
    </head>
    
    <body>
    <img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" />
    </body>
    </html>
    

    Spécifications

    Spécification Statut Commentaire
    CSS Transitions Working Draft Définit opacity comme animable.
    CSS Color Module Level 3 Recommendation Définition initiale.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 1.0 (1.7 ou moins) 9.0 9.0 1.2 (125)
    8.0
    filter: alpha(opacity=xx)
    filter: "alpha(opacity=xx)"

    (les deux sont synonymes)
    4.0
    filter: alpha(opacity=xx)
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de Base 1.0 1.0 (1.7) 9.0 9.0 3.2
    8.0
    filter: alpha(opacity=xx)
    filter: "alpha(opacity=xx)"

    (les deux sont synonymes)
    4.0
    filter: alpha(opacity=xx)
    • Histoire :  avant Mozilla 1.7 (Firefox 0.9) la propriété -moz-opacity a été implémentée d'une méthode non-standard (héritée). Avec Firefox 0.9 le comportement à changé et la propriété à été renommée en opacity.  Depuis lors -moz-opacity est supporté comme un alias pour opacity.
    • Gecko 1.9.1 (Firefox 3.5) et les versions postérieures ne supportent pas -moz-opacity. Désormais, il ne faut utiliser que opacity.
    • Avant la version 9, Internet Explorer ne supportait pas opacity, mais supporte filter à la place.
    • IE supporte aussi la forme utilisant une extention progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
    • IE8 a introduit -ms-filter, qui est le synonyme de filter. N'utilisez pas la forme préfixée.
    • De manière similaire à -moz-opacity, -khtml-opacity n'est plus utilisé depuis début 2004 (sortie de Safari 1.2).
      Konqueror n'a jamais supporté -khtml-opacity et supporte opacity depuis sa version 4.0.
      N'utilisez plus -khtml-opacity ni-moz-opacity.

    Voir également

    MSDN Microsoft's filter:alpha(opacity=xx)

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: FredB, Fredchat, Kyodev, teoli, Mgjbot
    Dernière mise à jour par : teoli,
    Masquer la barre latérale