CSS después de la imagen
Este tutorial le mostrará cómo agregar una superposición de imagen usando el pseudoelemento "después" en CSS. Agregaremos el efecto de superposición de la imagen con la ayuda del pseudo-elemento "después".
Ejemplo 1:
Para usar el pseudo-elemento "después" en CSS, creamos un archivo HTML. El código que escribimos en el archivo HTML se proporciona en este ejemplo. Puede usar el editor de texto que desea y comenzar a codificarlo. Escriba el código que se presenta en la siguiente imagen. Escribimos este código en el software de código de Visual Studio. Al seleccionar el idioma HTML en este nuevo archivo, simplemente escribimos "!". Presione Entrar, las etiquetas necesarias aparecerán automáticamente en este archivo. Empiece a codificar en su cuerpo.
Creamos una clase de "sección" llamada "banner" y colocamos un rumbo dentro de este "banner". También vinculamos este HTML con el archivo CSS, por lo que todos los estilos que hacemos en el archivo CSS se aplicarán a este código HTML. Lo guardamos con el ".Extensión del archivo HTML ".
Código CSS:
En este código CSS usamos el pseudoelemento "After" para crear la superposición de la imagen. Para el pseudoelemento "después", debemos tener el contenido, por lo que ponemos el "contenido" aquí. Creamos un elemento dentro del "banner" después del contenido del banner. Ahora, hacemos la "pantalla" "bloque" y damos la "posición" a este banner como "absoluto". La "superior" y la "izquierda" son "0". Luego, establecemos el "ancho" en "100%" lo mismo que la "altura" con el valor "100%". Usamos el "gradiente lineal" para la "imagen de fondo" para que la imagen sea más atractiva. Le damos un "120deg" a esto y ponemos dos colores en esta propiedad. Luego, establecemos su "opacidad" y colocamos el "0.Valor de 7 "para esto. Usamos el valor del índice Z aquí y ponemos "0" para esto.
Luego, establecemos la posición del "banner" en "pariente". También usamos la imagen de fondo dentro del banner. El "relleno" que establecemos para esto es "20VH" tanto para "superior" como para "fondo", y "0" para la "izquierda" y "derecha". Establecimos la "cubierta" para el "tamaño de fondo" y el "alineado de texto" en el "centro". Ahora, usamos el banner y seleccionamos todos los elementos del banner usando el selector "*". Cuando usamos este selector "*", obtiene todos los elementos y aplica el estilo que ponemos dentro de él en todos los elementos. A medida que nuestra superposición cubre tanto el texto como la imagen, usamos el "índice z" para resolver esto y establecemos el contenido de "índice z" en "10". Y establecer el "pariente" para su "posición".
Establecemos el color del contenido en "negro" para que el contenido escrito dentro del banner aparezca negro en la imagen. "Alinearemos" el encabezado "al" centro "y usamos la familia de fuentes" argelina "para este encabezado. Además, establecemos su tamaño en "40px".
Producción:
Puede obtener la salida en el navegador predeterminado cuando presione el "Alt+B" o haga clic en el botón derecho del mouse en el archivo HTML y luego seleccione el "Abrir en el navegador predeterminado". La salida dada se presentará en el navegador.
Ejemplo #2:
Aquí, tenemos otro ejemplo en el que creamos la superposición de la imagen usando el mismo pseudoelemento y cambiamos un poco nuestro código y le mostramos cómo funciona.
El código HTML es el mismo para este ejemplo. Pero aquí, cambiamos el encabezado que está escrito dentro del banner. Separamos esto en dos líneas usando el "
" etiqueta.
Primero, establecemos el encabezado un poco aplicándole algunas propiedades de estilo. Establecimos el "Alineado de texto", "tamaño de fuente" y "Fuente de Fuente" del encabezado. Luego, viene el pseudo-selector "después" que crea una superposición entre la imagen y el texto. Cada vez que usamos este selector de "después" en CSS, primero debemos definir el "contenido". Después de esto, configuramos su "pantalla" en "Bloquear". Los valores "superior" e "izquierda" que pusimos aquí están establecidos en "0". Mientras que los valores de "ancho" y "altura" se establecen en "100". Luego aplicamos el "gradiente lineal" y seleccionamos dos colores para esto que es "rosa" y "azul". Además, la propiedad de "opacidad" se usa aquí para dar una vista transparente de la imagen de fondo. Establecemos su valor en "0.6 ". Usamos la "escena de fondo.jpg "como la imagen de fondo para esto. Colocamos este nombre de imagen en la propiedad "URL" de "imagen de fondo".
Luego, usamos el relleno para crear el espacio y establecer sus valores "Top", "Bottom", "Right" e "Left" utilizando una propiedad "Pading". Aquí, el "200VH" define el relleno "superior" e "inferior" y el "0" define el relleno "izquierda" y "derecha". El "tamaño de fondo" es "cubierta" como usamos en nuestro primer ejemplo. Luego, establecemos el "banner" y el "índice z". Para esto, primero usamos el pseudo-elemento "después". Dentro de esto, establecemos el "índice" en "1". Da un índice z "1" a la superposición. Debajo de esto, establecemos el "índice z" para el "contenido" y aplicamos "10" para el índice Z de contenido. Usamos el selector "*" con el "banner" antes de dar un índice Z al contenido de banner. Este índice Z se aplica a todo el contenido escrito en el banner. También usamos el "Modo de mezcla de mezcla" para la superposición que creamos anteriormente. Esta propiedad de "Modo de mezcla de mezcla" ayuda a mezclar los múltiples elementos.
Cuando usamos esta propiedad con nuestra superposición, crea algunas nuevas combinaciones increíbles para nosotros. Podemos hacer que nuestra superposición sea una superposición avanzada utilizando esta "propiedad de mezcla de mezcla" en CSS. Después de completar este código, debemos guardarlo con un ".Extensión del archivo de CSS ", ya que es el archivo CSS.
Producción:
Conclusión
Discutimos el pseudo-elemento "después" en CSS para hacer la imagen de superposición en este tutorial. Aprendimos que la superposición se crea entre la imagen de fondo y el texto para que podamos seleccionar el texto, lo que significa que el texto está separado de la imagen. Utilizamos la "propiedad de mezcla mezcla" en estas superposiciones de imagen para hacerlas más atractivas. También exploramos los diferentes ejemplos y explicamos estos ejemplos en este tutorial. Proporcionamos todos los detalles en este tutorial, lo cual es necesario para que comprenda este pseudo-elemento "después" en CSS. Ahora, puede crear estas superposiciones en sus proyectos después de comprender estos ejemplos que lo ayudarán mucho en su codificación futura.