42- La propriedad Opacity en CSS

Opacidad o transparencia de un elemento

La propriedad opacity puede tomar un valor desde 0.0 hasta 1.0 siendo el valor mas bajo correspondente a menor transparencia

...

En el ejemplo tenemos tres imagens con opacidades distintas, correspondiendo la primera una opacidad de 0.3, la segunda una opacidad de 0.7 e la ultima mas transparente una opacidad de 1.0

Colores con opacidad

igual que las imagens anteriores tambien podemos usar esta opacidad para colores o por ejemplo cuando uno pasa el rato por encima de una imagen o objecto

ejemplo con colores

Opacity:1.0

Opacity:0.8

Opacity:0.7

Opacity:0.3

podemos usar texto opaco en una caja con una foto o color

Este es un texto con 50% de opacidad

Codigo html

     <div
    style="padding:80px; background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg');">
    <p style="text-align: center;padding:10px; background:white; opacity: 0.5;">Este es un texto con 50% de opacidad</p>

</div>
    

Ir al indice