CSS Background Image opacity

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?

👇 👇 👇 ¡ sigue leyendo ! 👇 👇 👇
css opacity

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?

👇 👇 👇 ¡ No te pierdas estos post ! 👇 👇 👇

Otras propiedades para el background

CSS Background

https://css-tricks.com/snippets/css/transparent-background-images/

No hay una propiedad CSS background-opacity, pero puede simularla insertando un pseudo elemento con una opacidad regular del tamaño exacto del elemento detrás de él. div { width: 200px; height: 200px; display: block; position: relative; } div::after { content: “”; background: url(image.jpg); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index:

Ver más »
CSS Background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador de front-end, Joseph tomó en cuenta los requisitos y pasó por muchas opciones diferentes para encontrar el mejor enfoque. Él nos guiará a través de

Ver más »
CSS Background

Nueva encuesta: el caso del desorden gigante

Suponga que ha diseñado una página web y utiliza una imagen de fondo de página completa. Realmente te gusta el aspecto del sitio con esta imagen de fondo. El se parece increíble. Pero la imagen es 350k. Ha decidido que aunque sabe que es pesado, vale la pena. Pero luego empiezas a pensar en dispositivos

Ver más »
Ir arriba