Darken Background Image CSS
Propiedades para la imagen de fondo oscura en CSS:
Usaremos las siguientes tres propiedades que proporciona el CSS para oscurecer la imagen de fondo. Estas propiedades son:
- Uso de la propiedad Filter.
- Uso de la propiedad de imagen de fondo y establece su valor en gradiente lineal.
- Uso de la propiedad de modo de mezcla de fondo.
Ahora, vamos a utilizar todas estas propiedades en nuestros códigos a continuación y aprenderá de estos ejemplos cómo usar estas propiedades y cómo establecer el valor de estas propiedades porque también explicaremos todos los códigos.
Ejemplo 1:
Estamos utilizando el código Visual Studio para mostrar los ejemplos proporcionados. Entonces, abriremos el nuevo archivo y seleccionaremos el idioma "HTML", que dará como resultado la producción de un archivo HTML. Luego, en el archivo recién generado, comenzamos a escribir el código. El ".La extensión del archivo HTML ”se agota automáticamente al nombre del archivo cuando guardamos el código completado. Ahora, obtenemos etiquetas básicas poniendo "!"Marcas y presionando" Enter ". Cuando hayan aparecido las etiquetas HTML básicas en este archivo creado, comenzaremos agregando un encabezado.
Luego, también colocamos un párrafo debajo de este encabezado e insertamos la imagen después de este párrafo. Si se inserta la imagen, tenemos otro párrafo y también una clase Div con el nombre de "Imagen oscura". Aquí, el código HTML se completa. Ahora, guárdelo y pasemos al archivo CSS donde agregaremos la propiedad "Filtrar" para oscurecer la imagen de fondo.
Para "H1", establecemos el valor "Font-Family" en "Argeliano" y también aplicamos "color" a este encabezado como "verde". El "tamaño de fuente" del texto del párrafo es "20px" y su "color" es "rojo", "audaz" en su "peso de fuente". Luego, vamos a utilizar la propiedad "Filtro" para la clase Div "IMAGE DARKENED". Esta propiedad ayuda a hacer que la imagen sea más oscura. Usamos esta propiedad aquí para que la imagen parezca más oscura en la salida. Establecemos su valor usando el valor de "brillo" y seleccionamos el brillo del "60%" para esta imagen.
En la "imagen de fondo", colocamos la misma ruta de la imagen que hemos dado en el archivo HTML. Entonces, aplicamos esta propiedad oscura a la imagen que hemos insertado arriba y veremos esa imagen original, así como la imagen oscura en la pantalla de salida. También establecemos el "ancho" y la "altura" del DIV como "200px" y "620px" respectivamente. Esta propiedad de "altura" establecerá la altura del DIV y la propiedad de "ancho" establecerá el ancho del Div.
Hacemos esta imagen una imagen más oscura con la ayuda de la propiedad "filtrar" CSS y establecer el "brillo" como el valor de esta propiedad. Hemos aplicado el brillo del "60%" a esta imagen para que sea más oscuro que la imagen original.
Ejemplo # 2:
Tenemos un encabezado aquí y luego agregar la imagen. Después de esta imagen, nuevamente colocamos un encabezado y luego tenemos un contenedor Div. Utilizaremos la segunda propiedad para hacer que esta imagen sea más oscura.
Aplicamos "color" a este encabezado como "granate" y establecemos el valor de "fuente de fuentes" para "H1" a "Argelino". La "altura" de la imagen se establece en "240px" y su "ancho" es "630px". Luego, mencionamos el contenedor Div "imagen oscura" y colocamos la propiedad de "imagen de fondo" en la que utilizamos el "gradiente lineal" y establecemos su valor en forma "RGBA". Aquí, usamos dos valores "RGBA" y los establecemos en "RGBA (0, 0, 0, 0.5) "donde" 0.5 ”es el valor alfa. También insertamos la imagen en la "url ()". Insertamos la ruta de la imagen en esta "url ()". La "altura" de este div es "240px" y también, definimos su "ancho" a "630px".
En la salida, se pueden ver las versiones originales y oscuras de la imagen. La imagen original y la imagen oscura se pueden distinguir claramente entre sí en la captura de pantalla a continuación. La imagen oscura se representa porque hemos utilizado la propiedad de "imagen de fondo" y establecemos su valor en el tipo de "gradiente lineal".
Ejemplo # 3:
Hemos usado el código HTML anterior e insertamos otra imagen en este código. Usaremos el "modo de mezcla de fondo" para crear el efecto de imagen oscuro en la imagen.
Establecemos el valor de "Font-Family" para "H1" a "Argelino" y aplicamos "Color" a este rumbo a "Maroon". El "ancho" de la imagen es "630px" y su "altura" es "250px". Utilizamos el nombre de la clase Div como "imagen oscura" y le aplicaremos algunas propiedades. Utilizamos la propiedad "Antecedentes" y colocamos el valor "RGBA" aquí. El valor "RGBA" que estamos utilizando es "(0, 0, 0, 0.7) "Y luego tenemos la propiedad" URL "que utilizamos para dar el camino de la imagen. Damos el camino de la imagen como "mynewimage.PNG ".
Después de esto, tenemos la propiedad de "reposo de fondo" y utilizamos la palabra clave "sin repetición" como el valor de esta propiedad. Ahora, también establecemos el "tamaño de fondo" y colocamos "cubierta" para que la imagen cubra todo el fondo. La propiedad de "modo de mezcla de fondo" es para aplicar el efecto de oscurecimiento a la imagen. Lo establecemos como la palabra clave "oscurecida". Entonces, cuando esta imagen se presenta en la pantalla de salida, aparecerá como una imagen oscura debido a esta propiedad. La "altura" del Div llamada "Imagen Darkened" se ajusta a "330px" y también establecemos su "ancho" que es "650px". Ahora, mire la salida de cómo aparecerán estas imágenes.
Tanto las formas originales como las más oscuras de la imagen son visibles en el resultado. Aquí en la instantánea a continuación, es posible decir fácilmente la diferencia entre la imagen original y la imagen oscura. Utilizamos el atributo "en segundo lugar" y colocamos la palabra clave "más oscura" como el valor de este atributo para prestar la imagen oscura.
Conclusión
Hemos cubierto a fondo este concepto y observamos numerosos casos de cómo oscurecer la imagen de fondo en CSS. Como se mencionó anteriormente, hemos utilizado tres propiedades diferentes para oscurecer la imagen de fondo. Hemos utilizado las tres propiedades en nuestros códigos. También cubrimos cómo usar estas propiedades y cómo establecer su valor. Hemos discutido que tenemos la propiedad "Filtrar", la propiedad de "imagen de fondo" y también la propiedad "en segundo plano de mezcla" para hacer que la imagen de fondo sea más oscura. También proporcionamos los resultados de todos estos códigos en los que hemos prestado tanto la imagen oscura como la imagen original en la pantalla de salida. Para su beneficio, hemos creado un tutorial completo en el que el código se proporciona y se explica a fondo, junto con los resultados.