Cómo establecer la opacidad de fondo en CSS

Configurar fondos en aplicaciones web es una operación común que atrae los ojos del usuario. Sin embargo, a veces podría conducir a una gran distracción. Para evitar tal situación, los desarrolladores web hacen que sus antecedentes sean transparentes aplicando la opacidad o el uso de propiedades alternativas de CSS de la opacidad.

En esta guía, cubriremos cómo establecer la opacidad de fondo en CSS.

Cómo establecer la opacidad de fondo en CSS?

En CSS, la opacidad de fondo se relaciona con los siguientes términos:

• • Opacidad de imagen de fondo
  • Opacidad de color de fondo

Ahora explicaremos ambos individualmente!

Cómo establecer la opacidad de la imagen de fondo en CSS?

El "opacidad"La propiedad se puede utilizar para hacer que las imágenes sean transparentes en segundo plano o en cualquier lugar de la página web. Los textos y los colores de fondo también se pueden hacer transparentes con el uso de esta propiedad.

Consulte el ejemplo detallado proporcionado para saber más sobre la configuración de la opacidad de la imagen de fondo en CSS.

Ejemplo

Actualmente, tenemos una imagen que se establece en el fondo de nuestro contenedor:

En nuestro archivo HTML, hemos agregado una etiqueta con el "my-img"ID en la sección del cuerpo:

Para establecer la opacidad de la imagen de fondo, tenemos que diseñar nuestro elemento de imagen. Para hacerlo, use el "#"Antes de ID nombrado"my-img" como "#my-img"Por peinarlo. Como la imagen se utilizará en el fondo del contenedor seleccionado, le dé algo de espacio al contenedor usando "relleno" de "15%". En el siguiente paso, configure la imagen como fondo utilizando el "fondo" propiedad; especifica el "sin repetición"Valor a lo largo"url ()"Valor para evitar la repetición de la imagen. Por último, establezca la opacidad como valor "0.2"O según sus preferencias:

Ahora, guarde el código y abra el archivo HTML en el navegador. En nuestro caso, lo abriremos con la ayuda del "Servidor en vivo":

Aquí, la opacidad en nuestra imagen se ha aplicado con éxito:

Vamos a dirigirnos hacia la siguiente sección!

Cómo establecer la opacidad de color de fondo en CSS?

Siempre hay posibilidades de que encuentre colores sólidos o de gradiente en el fondo del sitio web. Para la opacidad de los colores de fondo, utilizaremosmi "color de fondo" propiedad. Esta propiedad ayuda a configurar el color de fondo; Sin embargo, también se puede utilizar para establecer la opacidad de los colores de fondo o hacerlos transparentes.

Mire el siguiente ejemplo para el uso de la propiedad establecida.

Ejemplo 1: Uso de la propiedad de color de fondo para establecer una opacidad de imagen

En este ejemplo, el color de fondo de nuestra página web es naranja, y tenemos que establecer su opacidad:

Para hacerlo, usaremos el código de color hexadecimal con el "color de fondo" propiedad. Usando un color hexadecimal específico, aplicaremos la opacidad al color de fondo:

Nota: Cambiando el "#00000020"Valor para"#00000000"Hará que su fondo sea completamente transparente.

Guarde el código presionando "Ctrl + S"Y ábralo con el servidor en vivo:

Producción

Ahora, tomemos un ejemplo más interesante de establecer fondo de opacidad de color en CSS.

Ejemplo 2: Uso de la propiedad de color de fondo para hacer una imagen transparente

En este ejemplo, usaremos el "fondo"Propiedad y establecer su valor en"transparente". Como resultado, el fondo será transparente pero seguirá siendo parte del contenedor:

Aquí podemos ver el fondo totalmente transparente:

Para la verificación, inspeccione los elementos agregados en el contenedor:

Hemos entregado las formas más simples de establecer la opacidad de fondo.

Conclusión

Para establecer la opacidad de fondo, utilice el "opacidad","color de fondo", o "fondo" propiedad. La opacidad proporciona control sobre la configuración de la opacidad de fondo. La propiedad de color de fondo puede ayudar a aplicar la transparencia de los fondos a través del código de color hexadecimal, mientras que la propiedad de fondo es directa; Configurarlo en transparente hará que el fondo desaparezca. En este artículo, hemos demostrado cómo establecer la opacidad de fondo en CSS.