From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/opacity/index.html | 216 ++++++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 files/es/web/css/opacity/index.html (limited to 'files/es/web/css/opacity') diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html new file mode 100644 index 0000000000..154e4d7d82 --- /dev/null +++ b/files/es/web/css/opacity/index.html @@ -0,0 +1,216 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Reference + - CSS3 + - css3-color +translation_of: Web/CSS/opacity +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

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

+ +

Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
opacity:  <valor alfanumérico>
+ +

Valores

+ +
+
<alphavalue>
+
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. + + + + + + + + + + + + + + + + + + + +
valorSignificado
0El elemento es transparente (invisible).
Cualquier valor entre 0 y 1El elemento es translúcido.
1El elemento es opaco (sólido).
+
+
+ +

Ejemplos

+ +
hbox.example {
+  opacity: 0.5; /* see the background through the hbox */
+}
+ +

Live Example

+ +
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 {                               /* 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 {                               /* 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 */
+}
+ +

Variando la opacidad con :hover

+ +
<!doctype html>
+<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>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}{{ Spec2('CSS3 Transitions') }}Define opacity como una animación.
{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}{{ Spec2('CSS3 Colors') }}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.7") }}9.09.01.2 (125)
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.7") }}9.09.03.2
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ + + +

Más información

+ + -- cgit v1.2.3-54-g00ecf