Opacidad (opacity)

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.

La opacidad es una característica de los objetos de no dejar pasar la luz (mientras un objeto es más opaco significa que no deja pasar la luz) Un elemento HTML dispone de la propiedad opacity para definir cual es su opacidad. La sintaxis es la siguiente:

Elemento {
opacity: valor; }

El valor es un número comprendido entre 0 y 1. El 0 significa que es totalmente transparente (luego no se verá nada en pantalla, pero el espacio ocupado por el elemento HTML queda reservado), el 1 significa que es totalmente opaco (no deja pasar la luz)

La propiedad opacity especifica la opacidad o transparencia de un elemento, esta propiedad puede tomar un valor de 0.0 a 1.0. Cuanto menor sea el valor, más transparente:

opacity 0.2

opacity 0.5

opacity 1
(default)

Veamos tres recuadro con una imagen de fondo y un texto en su interior con diferentes niveles de opacidad (tengamos en cuenta que cuando le asignamos una opacidad a un elemento HTML luego todos los elementos contenidos en dicho elementos heredan dicha opacidad):

#recuadro1 {
background-image: url("foto1.jpg");
opacity:0.3;
color:#f00;
width:600px;
height:400px;
border-radius:15px;
font-size:30px;
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,

Opacidad 0.3

Ahora con una opacidad mayor:

#recuadro2 {
background-image: url("foto1.jpg");
opacity:0.6;
color:#f00;
width:600px;
height:400px;
border-radius:15px;
font-size:30px;
}

Opacidad 0.6

Finalmente con una opacidad de 0.9 (casi no deja pasar nada de luz):

#recuadro3 {
background-image: url("foto1.jpg");
opacity:0.9;
color:#f00;
width:600px;
height:400px;
border-radius:15px;
font-size:30px;
}

Opacidad 0.9

Veamos que pasa si no disponemos opacidad en el recuadro y el texto tiene un color de fondo:

#recuadro4 {
background-image: url("foto1.jpg");
color:#f00;
width:600px;
height:400px;
border-radius:15px;
font-size:30px;
} .texto4 { background-color:yellow; }

Sin opacidad

Y luego definiendo una opacidad en el párrafo:

#recuadro5 {
background-image: url("foto1.jpg");
color:#f00;
width:600px;
height:400px;
border-radius:15px;
font-size:30px;
}

.texto5 {
background-color:yellow;
opacity:0.2;
}

Opacidad text 0.2