Opacidad de imagen de fondo CSS sin afectar el texto
Ejemplo 1
Para cambiar la opacidad de la imagen de fondo sin afectar el texto, debemos escribir algún código HTML y cambiar la opacidad en el código CSS. Estamos utilizando el código de Visual Studio para hacer estos ejemplos. Entonces, abrimos el nuevo archivo en este software y seleccionamos el idioma "HTML", y se crea un archivo HTML. Luego, comenzamos a codificar en este archivo. Después de completar nuestro código, lo guardamos y el ".La extensión del archivo HTML "genera automáticamente este nombre de archivo.
Creamos una clase de "Div" "Demo-Wrap" usando una etiqueta de imagen. La clase de imagen que usamos es "IMG-BG". Ahora, tenemos que configurar la imagen en el fondo, por lo que usamos "SCUENT-IMG SRC" y poner el nombre de la imagen que queremos mostrar como imagen de fondo. Aquí, establecemos el "paisaje.Imagen de JPG "como imagen de fondo. También tenemos otro "div" dentro del primer div, y el nombre de este div es "texto". Y, en el segundo div, tenemos un encabezado "H1" y tipo A en este "Div". Entonces, cierre ambas etiquetas "div".
Código CSS
En el código CSS dado, estamos cambiando la opacidad de la imagen de fondo, pero el encabezado de texto que escribimos en esta imagen sigue siendo el mismo. La opacidad de la imagen de fondo no cambia la opacidad del texto.
Usamos "IMG-BG", que es el nombre de la clase de imagen, y establecemos la opacidad de la imagen como "0.4 ". Estamos configurando la imagen de fondo "posición" a "absoluto". La "izquierda" y "superior" están configuradas en "0". El "ancho" que establecemos aquí es "100%" para la imagen de fondo, y "altura" es "auto". A continuación, diseñamos nuestro texto mientras lo alineamos en el "Centro" y establecemos su "Fuente-Familia" en "Argelino". Estamos usando "negro" como el color de la fuente.
Producción
Puede ver que la imagen en el fondo no está en su color original porque usamos "0.Opacidad de 4 "en esta imagen de fondo. Sin embargo, no hay ningún efecto en el texto escrito en la imagen. De esta manera, podemos cambiar la opacidad de la imagen sin afectar el texto.
Ejemplo # 2
Al cambiar el código HTML anterior, creamos otro ejemplo. Pero esta vez, agregamos la imagen usando propiedades CSS.
Este archivo define dos encabezados en la clase "Div". Tenemos "H1" y "H2" en la clase Div llamada "Héroe" en este código. Agregaremos la imagen de fondo en el código CSS a continuación.
Código CSS
La posición del "héroe" de la clase div es "relativa", su altura es "90VH", y su ancho es "90%". La pantalla para este "héroe" de la clase div es "flexible", elemento en el "centro" y "justify-contento" al "centro". El ":: antes" es el "pseudo-selector" utilizado para colocar la imagen de fondo antes del elemento seleccionado. Ponemos "contenido", establecemos la "imagen de fondo" usando la "URL" y ponemos el nombre de la imagen en esta URL. El "tamaño de fondo" establece la imagen del fondo en "cubrir", y su "posición" es "absoluta". Entonces los "arriba", "inferior", "izquierda" y "derecha" son todos "0px". Aquí, cambiamos la "opacidad" a "0.4 ". Ahora aplicamos el estilo a los encabezados. El encabezado "Posición" que establecemos es "relativo". El color de encabezado es "rojo". El tamaño de este encabezado es "25px", y la "altura de la línea" es "0.9 ". Alineamos esto en el "centro". El color del segundo encabezado es "negro".
Producción
Aquí, la imagen de fondo no aparece en su color original, ya que hemos establecido la opacidad de la imagen en el código CSS. Pero el texto en la imagen aparece en el color original.
Ejemplo # 3
Creamos otro archivo HTML. En este código, creamos tres párrafos dentro de la clase Div, y la clase DIV que hemos creado se llama "ImageOpc".
Código CSS
Vamos a insertar la imagen de fondo en el código CSS. Entonces, usamos el pseudo-selector "antes", que hemos desuso en el ejemplo anterior. Aquí, el código es el mismo que en el segundo ejemplo, pero cambiamos la imagen de fondo y usamos la propiedad "Opacidad" en una imagen diferente. Aquí, "izquierda", "derecha", "Bottom" y "Top" están configuradas en "0". Y "0.4 ”de la opacidad se usa para esta imagen. Establecimos el párrafo en la posición "relativa". Y establecer su altura igual a "0.9px ". También cambiamos el "tamaño de fuente" del párrafo y establecemos esto en "25px". La familia de fuentes "argelina" se usa para el párrafo. Y establecemos su mejor "200px".
Producción
Puede ver que la imagen de fondo muestra cierta transparencia. Aquí, usamos el 40% de opacidad en esta imagen de fondo, pero puede notar que no afecta el texto escrito en la imagen de fondo.
Ejemplo # 4
Estamos haciendo cambios menores en el código HTML anterior. En este ejemplo, usamos cuatro párrafos dentro de los nombres "Div" y "GiveGivingageOpc" para esta clase Div.
Código CSS
Este código CSS es el mismo que el código anterior. Sin embargo, cambiamos la "URL" de la imagen de fondo. Usamos la "escena de fondo.imagen de jpg "aquí. Recuerde que está utilizando la extensión de imagen correcta con el nombre de la imagen. Debe poner la ruta correcta de la imagen en esta "URL". Usamos el "0.Valor de 5 "para la opacidad de la imagen de fondo en este caso. El "tamaño de fuente" que usamos es "30px" en este ejemplo para el párrafo. Establecimos el párrafo Font-Family a "Times New Roman", y además está "200px". El párrafo aparece en "Maroon" y es "más audaz" en "Font-Weight".
Producción
Esta imagen de fondo muestra el 50% de opacidad a medida que establecemos su valor en "0.5 ", pero el texto sigue siendo el mismo. Este valor de opacidad no se aplica al texto.
Conclusión
Hemos presentado esta guía en la que cambiamos la opacidad de la imagen de fondo sin afectar el texto. Por lo tanto, puede determinar cómo cambiar la opacidad de la imagen de fondo en CSS sin afectar el texto. Hemos explicado y mostrado diferentes ejemplos en los que usamos la propiedad de "opacidad" para cambiar la opacidad de la imagen de fondo, pero el texto sigue siendo el mismo. Después de aprender esta guía, puede insertar las imágenes de fondo en sus proyectos y establecer la opacidad de la imagen de fondo sin afectar el texto utilizando la propiedad CSS.