opacity

  • Raccourci de la révision : CSS/opacity
  • Titre de la révision : opacity
  • ID de la révision : 56747
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire page display name changed to 'opacity'

Contenu de la révision

{{ CSSRef() }}

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.

  • {{ Xref_cssinitial() }} : 1.0 (opaque)
  • S'applique à : tous les éléments
  • {{ Xref_cssinherited() }} : non
  • Pourcentages: n/a
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} : le nombre défini (inclu dans l'ensemble [0.0, 1.0])

Syntaxe

opacity:  <number> | inherit

Valeurs

Une gamme de valeurs de {{ Xref_cssnumber() }} de 0.0 à 1.0. N'importe quelle valeur plus grande ou plus petite sera limitée à cet ensemble.

0
L'élément est complètemen transparent (c'est à dire, invisible).
number entre 0 et 1
L'élément est translucide (on peut voir l'arrière-plan au travers).
1
L'élément est entièrement 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>

Notes

  • 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.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 {{ CompatGeckoDesktop("1.7") }} 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 {{ CompatGeckoMobile("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)
  • 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.

Spécifications

  • {{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}

Voir également

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

{{ HTML5ArticleTOC() }}

{{ languages( { "de": "de/CSS/opacity", "en": "en/CSS/opacity", "pl": "pl/CSS/-moz-opacity" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h3 id="Résumé">Résumé</h3>
<p>La propriété CSS <code>opacity</code> définie la transparence d'un élément, c'est à dire, le degré d'arrière-plan qui est visible.</p>
<p>Utiliser cette propriété avec une valeur différente de <code>1</code> place l'élément dans un nouveau <a href="/fr/Comprendre_le_z-index_en_CSS/L'empilement_de_couches" title="fr/Comprendre_le_z-index_en_CSS/L'empilement_de_couches">contexte d'empilement</a>.</p>
<ul> <li>{{ Xref_cssinitial() }} : <code>1.0</code> (opaque)</li> <li>S'applique à : tous les éléments</li> <li>{{ Xref_cssinherited() }} : non</li> <li>Pourcentages: n/a</li> <li>Média : {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }} : le nombre défini (inclu dans l'ensemble [<code>0.0</code>, <code>1.0</code>])</li>
</ul>
<h3 id="Syntaxe">Syntaxe</h3>
<pre>opacity:  &lt;number&gt; | inherit
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>Une gamme de valeurs de {{ Xref_cssnumber() }} de <code>0.0</code> à <code>1.0</code>. N'importe quelle valeur plus grande ou plus petite sera limitée à cet ensemble.</p>
<dl> <dt>0</dt> <dd>L'élément est complètemen transparent (c'est à dire, invisible).</dd> <dt><em>number </em>entre 0 et 1</dt> <dd>L'élément est translucide (on peut voir l'arrière-plan au travers).</dd> <dt>1</dt> <dd>L'élément est entièrement opaque.</dd>
</dl>
<h3 id="Exemples">Exemples</h3>
<pre>hbox.example {
  opacity: 0.5; /* on voit l'arrière-plan au travers de hbox */
}
</pre>
<h4 id="Exemple_de_compatibilité_entre_navigateurs">Exemple de compatibilité entre navigateurs</h4>
<pre style="border:solid red; opacity:0.2; filter:alpha(opacity=20); zoom:1">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>
<pre style="border:solid red; opacity:0.5; filter:alpha(opacity=50); zoom:1">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>
<pre style="border:solid red; opacity:0.8; filter:alpha(opacity=80); zoom:1">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 */ 
}
</pre>
<h4 id="Opacités_différentes_grâce_à_:hover">Opacités différentes grâce à :hover</h4>
<pre class="deki-transform">&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }  
 
img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 id="Notes">Notes</h3>
<ul> <li><strong>Histoire :</strong>  avant Mozilla 1.7 (Firefox 0.9) la propriété <code>-moz-opacity</code> 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 <code>opacity</code>.  Depuis lors <code>-moz-opacity</code> est supporté comme un alias pour <code>opacity</code>. <p>Gecko 1.9.1 (Firefox 3.5) et les versions postérieures ne supportent pas <code>-moz-opacity</code>. Désormais, il ne faut utiliser que <code>opacity</code>.</p> </li>
</ul>
<h3 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Fonction</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td rowspan="3">Support de base</td> <td rowspan="3">1.0</td> <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td> <td>9.0</td> <td rowspan="3">9.0</td> <td rowspan="3">1.2 (125)</td> </tr> <tr> <td>8.0<br> <code>filter: alpha(opacity=xx)<br> filter: "alpha(opacity=xx)" </code><br> (les deux sont synonymes)</td> </tr> <tr> <td>4.0<br> <code>filter: alpha(opacity=xx)</code></td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table" style="width: 827px; height: 156px;"> <tbody> <tr> <th>Fonction</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td rowspan="3">Support de Base</td> <td rowspan="3">1.0</td> <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td> <td>9.0</td> <td rowspan="3">9.0</td> <td rowspan="3">3.2</td> </tr> <tr> <td>8.0<br> <code>filter: alpha(opacity=xx)<br> filter: "alpha(opacity=xx)" </code><br> (les deux sont synonymes)</td> </tr> <tr> <td>4.0<br> <code>filter: alpha(opacity=xx)</code></td> </tr> </tbody> </table>
</div>
<ul> <li>Avant la version 9, Internet Explorer ne supportait pas <code>opacity</code>, mais supporte <code>filter</code> à la place.</li> <li>IE supporte aussi la forme utilisant une extention<code> progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>.</li> <li>IE8 a introduit <code>-ms-filter</code>, qui est le synonyme de <code>filter</code>. N'utilisez pas la forme préfixée.</li> <li>De manière similaire à <code>-moz-opacity</code>, <code>-khtml-opacity</code> n'est plus utilisé depuis début 2004 (sortie de Safari 1.2).<br> Konqueror n'a jamais supporté <code>-khtml-opacity</code> et supporte <code>opacity</code> depuis sa version 4.0.<br> N'utilisez plus <code>-khtml-opacity</code> ni<code>-moz-opacity</code>.</li>
</ul>
<h3 id="Spécifications">Spécifications</h3>
<ul> <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}</li>
</ul>
<h3 id="Voir_également">Voir également</h3>
<p><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms532910(VS.85).aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></p>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "de": "de/CSS/opacity", "en": "en/CSS/opacity", "pl": "pl/CSS/-moz-opacity" } ) }}</p>
Revenir à cette révision