Crear dibujos de fondo de texto CSS es una excelente manera de agregar un elemento de diseño increíble a cualquier sitio web. La clave para crear estos antecedentes de texto personalizados es el uso de la propiedad de clip de fondo CSS con un valor de texto. Debido a que este método ha ganado recientemente popularidad y soporte de navegador, le mostraremos cómo usarlo en la división. Abre una capa de diseño adicional que se dirige a los elementos de texto (como H1, H2, P, etc.) además de todas las otras maravillosas capacidades de diseño de la Divica. Vamos a empezar. Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial.
Aquí hay un ejemplo de fondo de gradiente lineal agregado al texto del encabezado utilizando el clip de fondo

Aquí hay un ejemplo de fondo de imagen agregado a la cabeza del encabezado y un fondo de gradiente lineal agregado al texto del párrafo utilizando el clip de fondo

Aquí hay un CodePen que demuestra este concepto. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Cómo usar el video de fondo con texto antes de comenzar a construir nuestros ejemplos en el DIV, primero comprendamos el código CSS necesario para extraer un fondo de texto personalizado. Supongamos que tenemos un elemento de título H2 que se ve así.
En primer lugar, debe establecer el fondo que desea usar. En este ejemplo, agregaremos un fondo de gradiente a nuestro elemento H2 utilizando el gradiente lineal. H2 {fondo: gradiente lineal (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);

}
Luego agregue el clip de fondo: texto junto con la versión necesaria del prefijo “-webkit” para mostrar el elemento solo detrás del texto.
H2 {

Antecedentes: gradiente lineal (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);
Clip de fondo: texto;
-Webkit-background-clip: texto;
}
Luego agregue -webkit-text-ray-color: transparente para reemplazar el color del texto y hacerlo transparente. H2 {
Antecedentes: gradiente lineal (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);
Clip de fondo: texto;
-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;
}
Luego agregue los prefijos del navegador necesarios para hacer que los jardineros lineales sean más amigables con el navegador: H2 {
Antecedentes: -webkit-lineal-gradiente (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);

Antecedentes: -lino-gradiente (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);
Antecedentes: gradiente lineal (a la derecha, #1613BD 0%, #D915B5 50%, #E7EA2 100%);
Clip de fondo: texto;
-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;
}
Como puede ver, este ejemplo usa tres colores para crear un gradiente, pero puede agregar fácilmente todo lo que desee.
Eso es realmente todo lo que existe. Por supuesto, le ayuda a comprender mejor cómo usar la función de gradiente lineal para diseñar el tipo de fondo de gradiente que desee. Para obtener más información, consulte la documentación sobre la función de gradiente lineal. También puede explorar este generador de gradiente de texto CSS para explorar algunas opciones divertidas. Y, si no desea usar un gradiente, puede usar un fondo de imagen real. El código se vería así: H2 {fondo: Center / Cover URL (“Agregar URL de imagen”);
Clip de fondo: texto;
-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;
}
Ahora que tenemos una mejor comprensión del CSS, hundamos en el tutorial.
Diseño de fondos con fondos de clip de fondo en la División 1: usando el fondo para agregar un fondo de gradiente a un encabezado H1 para nuestro primer ejemplo, agregaremos un fondo de gradiente a un título H1. La sección, giro y columna primero, abra la configuración de la sección y agregue un color de fondo:
Color de fondo: # 153243
En la sección, agregue una fila con una columna.
El módulo de texto H1 Para agregar el Título H1, agregue un nuevo módulo de texto a la columna de fila.
Abra la configuración del texto y pegue el siguiente texto HTML H2 bajo el contenido de texto del cuerpo.

Creación de fondos de texto CSS en div

En la pestaña Diseño, actualice la configuración de diseño H1 de la siguiente manera:

Título de la fuente: Montserrat
Título Fuente de peso: Bold

Estilo de fuente de título: TT
Alineación del texto del encabezado: Centro
Encabezado de texto en color: #ffffff
Tamaño de texto Ante: 100 PX (escritorio), 55 PX (tableta), 28 PX (teléfono)
Altura de la línea de dirección: 1.2em
Nota: El color del texto del encabezado será sobrescritado por el CSS personalizado, pero es bueno seleccionarlo como alternativa para cualquier evento. En la pestaña avanzada, agregue la siguiente clase CSS:
Clase CSS: Clip de texto de texto
Usaremos esta clase como selector en nuestro código CSS CSS más adelante.
El código CSS para agregar el código CSS para darle a H1 un fondo de gradiente, agregue un nuevo módulo de código en el módulo de texto.

Luego pegue los siguientes CSS en el cuadro de código asegurándose de envolver el código en las etiquetas de estilo necesarias: .Text-Backgound-Clip H1 {
Antecedentes: -webkit-lineal-gradiente (a la derecha, #e8d33f, #06d6a0, #e8d33f);
Antecedentes: -lino-gradiente (a la derecha, #E8D33F, #06D6A0, #E8D33F);


Antecedentes: gradiente lineal (a la derecha, #E8D33F, #06D6A0, #E8D33F);

Clip de fondo: texto;
-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;
}
Nota: Volveremos al mismo módulo de código para agregar CSS adicional para los siguientes ejemplos.
El resultado es el resultado. Como puede ver, el fondo de gradiente se ha cortado para que se muestre solo por el elemento de título H1.
Parte 1: Usando el Clip de fondo para agregar una imagen de fondo a un título H2, no nos limitamos a los fondos degradados para enfatizar los fondos del texto. También podemos enfatizar los fondos de nuestro texto con imágenes de fondo. En el siguiente ejemplo, utilizaremos el mismo método (usando “Clip de fondo”) para agregar una imagen de fondo a un título H2. La sección, el giro y la columna para comenzar, cree una nueva sección habitual en la sección existente de nuestro primer ejemplo.
Luego agregue una fila con una columna a la sección.

Abra la configuración de la sección y agregue una imagen de fondo oscura a la sección. A continuación, copie el módulo de texto existente en nuestro primer ejemplo y peguela a nuestra nueva sección.
Abra la configuración de texto para el módulo de texto duplicado y cambie el título H1 en un título H2 que actualiza el código HTML:

Creación de fondos de texto CSS en div

En la pestaña Diseño, haga clic en la pestaña H1 y copie el texto del título H1 Styri. Luego, haga clic en la pestaña H2 y pase el texto de los estilos H1 del título para que el título H2 tenga el mismo estilo.

El código CSS para agregar el código CSS que tiene que proporcionar antecedentes de imagen H2, abrir el módulo de código existente que he creado previamente y pegado el siguiente CSS en el primer fragmento CSS: .Text-Background-Clip H2 {

Antecedentes: Center/Cover URL (“https://jason.sandbox.etdev.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg”);

Clip de fondo: texto;

-Webkit-background-clip: texto;

-Webkit-text-chill-color: transparent;

}
Esto agregará una imagen de fondo detrás del elemento H2. El estenograma de fondo CSS incluye el “centro” para la posición de fondo, la “cubierta” para el tamaño del fondo y la URL de la imagen real. Para encontrar la URL de una imagen en su propio sitio, puede abrir fácilmente la Galería de Medios de WordPress, seleccionar la imagen y copiar la URL del archivo.
Resultado
Parte 3: Uso del fondo para agregar un fondo de gradiente de texto de párrafo para nuestro último ejemplo, utilizaremos el clip de fondo para agregar un fondo degradado al texto del párrafo. El proceso es el mismo. La única diferencia será el código CSS que se dirigirá a la etiqueta P para nuestro texto del párrafo. Agregue un módulo de texto Agregue un nuevo módulo de texto en el módulo de texto anterior en la misma sección que diseñamos en la Parte 2. Acturalizar el contenido del cuerpo con el siguiente texto HTML del párrafo:
Cras Luctus Ornament East, Sed Phartra Mauris vestibulum en. En nulla sem. Consecuencia y triste no, pulvinar preteium ante. Cras Aliquam Risus Ullamcorper Odio Interdum Facilisis. Vestibulum vitae Augue Tezor, Commodo Sapien Ut, Creimentum. Habitant Pellentesque Morbi Sainique Senectus et Netus et Malesuada Fames AC Turpis Egestas. Cras Luctus Ornament EST, Sed Pharetra Mauris vestibulum in.
Nota: Asegúrese de que el texto esté envuelto con la etiqueta P, ya que este será el selector al que se dirigiremos en nuestro código CSS personalizado.
En la pestaña Diseño, actualice los siguientes estilos de texto:

Color de texto de texto: #ffffff

Tamaño de texto de texto: 16 PX

Altura de la línea de texto: 2em

Ancho máximo: 500 PX
Alineación del módulo: centro

En la pestaña avanzada, agregue la misma clase CSS utilizada anteriormente:
Clase CSS: Clip de texto de texto
El código CSS Finalmente, pegue el código CSS que se dirige a la etiqueta P y agrega un fondo degradado usando el clip de fondo: texto. .Text-Background-Clip P {
Antecedentes: -webkit-lineal-gradiente (a la derecha,#DDD 0%,#E7EA2 100%);
Antecedentes: -lino-gradiente (a la derecha,#DDD 0%,#E7EA2 100%);
Antecedentes: gradiente lineal (a la derecha,#DDD 0%,#E7EA222); Clip de fondo: Text;

-Webkit-background-clip: texto;
-Webkit-text-chill-color: transparent;

}
El resultado es el resultado de diseñar el fondo del texto del párrafo.
¡Resultados finales ahora verifique los resultados finales de nuestros proyectos! Aquí hay un ejemplo de fondo de gradiente lineal agregado al texto del encabezado utilizando el clip de fondo
Aquí hay un ejemplo de fondo de imagen agregado a la cabeza del encabezado y un fondo de gradiente lineal agregado al texto del párrafo utilizando el clip de fondo
Pensamientos finales La capacidad de agregar fondos de texto personalizados a su sitio puede ser una herramienta de diseño útil. Y, si comprende mejor cómo usar la propiedad de fondo CSS en combinación con clip de fondo: texto, las posibilidades son ilimitadas. Si necesita un poco de ayuda para crear su propio CSS, también puede explorar este generador de gradiente de texto CSS para ayudar a restaurar el proceso. Además, si desea un efecto similar sin todos los CS personalizados, verifique cómo aplicar el color del texto degradado con las opciones de mezclar Div. Espero tener noticias suyas en los comentarios. ¡Suerte!