Ejemplo
Ajuste el nivel de opacidad para un <div> elemento:
div
{
opacity: 0.5;
}
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de opacidad ajusta el nivel de opacidad de un elemento.
El nivel de opacidad describe el nivel de transparencia, en la que 1 no es transparente en absoluto, 0,5 es 50% transparente, y 0 es completamente transparente.
| Valor por defecto: | 1 |
|---|---|
| Heredado: | no |
| animatable: | yes, see individual properties . Read about animatable Try it |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.opacity="0.5" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
Nota: Internet Explorer 8 y versiones anteriores apoya una alternativa, la propiedad de filtro. Al igual que: filter:Alpha(opacity=50) .
sintaxis CSS
opacity:number|initial|inherit;Valores de propiedad
| Valor | Descripción | Juegalo |
|---|---|---|
| number | Especifica la opacidad. De 0,0 (fully transparent) a 1,0 (fully opaque) | Juegalo " |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | Juegalo " |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo
Cómo utilizar JavaScript para cambiar la opacidad de un elemento:
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
} Inténtalo tú mismo " Páginas relacionadas
CSS tutorial: CSS Imagen Opacidad / Transparencia
Referencia HTML DOM: opacity property