Índice

Opacidad de las cajas

Con las CSS3, es posible variar la opacidad o la transparencia de un elemento.

La propiedad opacity forma parte del módulo CSS Color Module Level 3 que está en estado Recommendation a 7 de junio de 2011.

opacity:

Valor comprendido entre 1 y 0. Con el valor 1, la opacidad es completa y la transparencia nula. Con 0, la opacidad es nula y el elemento es completamente transparente.

Comentarios

  • El resultado de la propiedad opacity es bastante próximo al de la notación de color RGBa con transparencia. Sin embargo, cabe destacar que la propiedad opacity se aplica al elemento en su totalidad, así como a todos sus descendentes. RGBa solo se aplica sobre el elemento seleccionado.

  • El elemento dotado de la propiedad opacity es translúcido. Deja mostrarse al elemento que se encuentra eventualmente situado por debajo de él (ver el siguiente ejemplo).

En estos ejemplos, aplicaremos una opacidad sucesiva de 1, 0.5 y 0.2 a cada caja <div>.

Ejemplos

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <title>Opacidad</title>  
    <meta charset="UTF-8" />  
    <style>  
        .caja {  
            width: 500px;  
            border: 10px solid #000;  
            padding: 5px;  
   ...