Establecer la opacidad de una imagen de fondo en CSS implica utilizar el propiedad de imagen de fondo junto con la propiedad de opacidad. Al ajustar la opacidad, controlas la transparencia de la imagen de fondo, permitiendo que los elementos detrás de ella se muestren parcialmente, creando un efecto visual en capas.
Estamos utilizando los siguientes enfoques para configurar la opacidad de la imagen de fondo en CSS:
Tabla de contenidos
núcleo java
1. Usando la propiedad de opacidad
El Propiedad de opacidad en CSS establece el nivel de transparencia de un elemento y su contenido. Aceptar valores entre 0 (totalmente transparente) y 1 (totalmente opaco) afecta a todo el elemento, incluidos sus hijos, lo que lo convierte en una forma sencilla y eficaz de controlar la transparencia en el diseño web.
Sintaxis:
div { opacity: 0.5; }> Ejemplo: La propiedad de opacidad en el estilo CSS de la clase .element se establece en 0,3, lo que hace que la imagen de fondo sea semitransparente. Esto ajusta la visibilidad del fondo mientras mantiene la legibilidad del texto.
HTML
> <>html> lang>=>'en'>>> ><>head>>> ><>meta> charset>=>'UTF-8'>>> ><>meta> name>=>'viewport'> content>=>'width=device-width, initial-scale=1.0'>>> ><>title>>Opacidad de la imagen de fondo |