La porpiedad css background-image opacity nos permite darle transparencia a nuestra imagen de fondo asignada a cualquier etiqueta HTML. ¿Vemos que es exactamente y que podemos hacer con ella?
Primero un ejemplo de css background-image opacity
See the Pen css background image opacity by Juan Antonio Muñoz Castro (@colchonero82) on CodePen.
En el ejemplo podemos ver una caja principal que contiene un div en el que vamos a meter el fondo con la transparencia que queramos añadirle. En el ejemplo hemos usado position:absolute y z-index:-1 para que el div con ID “fondo” se ajuste al contenedor y se quede por detrás del mismo.
Una vez tenemos colocado como nos interesa el div fondo procedemos a poner una imagen de fondo mediante la as siguientes opciones:
- Background-image: url();
- Background-size: cover;
- Background-position: center;
Para más información sobre estas opciones te recomendamos ver el post de esta misma web sobre la propiedad css background image cover donde vemos con más detalle estas opciones.
Por último tenemos la propiedad “opacity” que hemos asignado con un valor de 0.8. Teniendo en cuenta que 1 seria totalmente sólida y 1 totalmente transparente, jugando con este valor se le asignará un transparencia al fondo mediante css de forma fácil y rápida!
¿Te ha gustado este post sobre la propiedad css “opacity” para cambiar la transparencia de una imagen de fondo asignada mediante backgroun-image?
