files/es/web/css/opacity/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

---
title: opacity
slug: Web/CSS/opacity
tags:
  - CSS
  - CSS Reference
  - CSS3
  - css3-color
translation_of: Web/CSS/opacity
---
<div>{{ CSSRef() }}</div>

<h2 id="Summary" name="Summary">Resumen</h2>

<p>La propiedad CSS <code>opacity</code> define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.</p>

<p>Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">contexto de apilamiento</a>.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Sintaxis</h2>

<pre class="syntaxbox">opacity:  &lt;valor alfanumérico&gt;</pre>

<h3 id="Values" name="Values">Valores</h3>

<dl>
 <dt><code>&lt;alphavalue&gt;</code></dt>
 <dd>Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.
 <table class="standard-table">
  <tbody>
   <tr>
    <th>valor</th>
    <th>Significado</th>
   </tr>
   <tr>
    <td><code>0</code></td>
    <td>El elemento es transparente (invisible).</td>
   </tr>
   <tr>
    <td>Cualquier valor entre 0 y 1</td>
    <td>El elemento es translúcido.</td>
   </tr>
   <tr>
    <td><code>1</code></td>
    <td>El elemento es opaco (sólido).</td>
   </tr>
  </tbody>
 </table>
 </dd>
</dl>

<h2 id="Examples" name="Examples">Ejemplos</h2>

<pre class="brush: css">hbox.example {
  opacity: 0.5; /* see the background through the hbox */
}</pre>

<h3 id="Live_Example" name="Live_Example">Live Example</h3>

<pre>pre {                               /* make the box translucent (20% opaque) */
   border: solid red;
   opacity: 0.2;
   filter: alpha(opacity=20);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<pre>pre {                               /* make the box translucent (50% opaque) */
   border: solid red;
   opacity: 0.5;
   filter: alpha(opacity=50);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<pre>pre {                               /* make the box translucent (80% opaque) */
   border: solid red;
   opacity: 0.8;
   filter: alpha(opacity=80);       /* IE8 and lower */
   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
}</pre>

<h3 id="Different_opacity_with_.3Ahover" name="Different_opacity_with_.3Ahover">Variando la opacidad con :hover</h3>

<pre class="brush: html">&lt;!doctype html&gt;
&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>

<h2 id="Specifications" name="Specifications">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Define <code>opacity</code> como una animación.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}</td>
   <td>{{ Spec2('CSS3 Colors') }}</td>
   <td>Definición inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>

{{Compat("css.properties.opacity")}}

<h2 id="See_also" name="See_also">Más información</h2>

<ul>
 <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms532910%28VS.85%29.aspx">MSDN Microsoft's filter:alpha(opacity=xx)</a></li>
</ul>