Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a CSS que contiene a Propiedades CSS de opacidad o semitransparencia: opacity y filter

Datos de búsqueda

Propiedades CSS de opacidad o semitransparencia: opacity y filter

Para que un elemento no sea del todo opaco, que tenga una semitransparencia, se utiliza la propiedad CSS opacity. Por ejemplo, para una opacidad del 50%:

.opacidad {opacity: 0.5;}

Como de costumbre Internet Explorer no lo soporta. Pero al menos tiene una forma de hacerlo, mediante la propiedad filter. Para obtener una opacidad del 50% en IE:

.opacidad {filter: alpha(opacity=50);}

La propiedad opacity valida en CSS 3. La propiedad filter no valida, por lo que deberá ser insertada mediante hojas de estilo llamadas dentro de comentarios condicionales o mediante Javascript.

Saber más: Opacity, How to set the opacity of an element (enlace externo, en inglés).

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay 2 comentarios a “Propiedades CSS de opacidad o semitransparencia: opacity y filter”

Venta Pisos Guipuzcoa dice:

Fecha de comentario: 2011/01/03 13:19

BUenos dias:

Tengo estos dos errores de los 3 que me faltan por deporar:

Error de análisis sintáctico opacity=75) !important
La propiedad opacity no existe en CSS versión 2.1 pero existe en : 0.75 0.75

Me podrias explicar como es eso de comentarios adicionales.

Un cordial saludo

jervert dice:

Fecha de comentario: 2011/01/03 16:30

La propiedad ‘opacity’ valida en CSS 3, si se valida en CSS 2.1 da error, pero no explica bien donde existe.

Si necesitas validar CSS 2.1 se deben meter las propiedades de opacidad mediante Javascript.

Lo de los comentarios condicionales: se trata de dar los estilos específicos para Internet Explorer (ya sea en un elemento STYLE, o vinculando una CSS mediante elemento LINK) dentro de los comentarios condicionales (el artículo enlaza a la explicación de uso).

Información del sitio