CSS creando fondos texturizados

En CSS, los usuarios pueden aplicar varias propiedades para colocar el fondo del elemento. Además, CSS también permite a sus usuarios agregar una imagen texturizada como fondo del elemento. El "imagen de fondoLa propiedad se utiliza para configurar una o más imágenes como imágenes de fondo. Mientras que el "repetición"La propiedad CSS hace que la imagen de fondo se repita y texturiza.

En este tutorial, ilustraremos el método para crear un fondo texturizado.

Cómo crear antecedentes texturizados utilizando el CSS?

Siga el procedimiento para crear un fondo texturizado utilizando el CSS.

Paso 1: crear un contenedor Div

En un documento HTML, cree un simple ""Elemento con el nombre de la clase"T-background".

Paso 2: Agregar sección

Entonces, agregue un ""Etiqueta junto con el"estilo"Atributo, y establece el estilo como"Pantalla: Flex". Esta propiedad se utiliza para establecer el diseño o la longitud de los elementos o elementos flexibles.

Paso 3: Haz otro Div

Dentro de ""Contenedor, inserte otros dos elementos junto con"textura-1" y "textura-2"Clases, respectivamente:

Paso 4: Elementos de clase de acceso

En la sección CSS, acceda a ambos "div"Contenedores que tienen clases"textura-1" y "textura-2"Usando el selector de puntos. Luego, intente las propiedades de estilo CSS mencionadas:

.textura-1, .textura-2
margen: 50px;
Altura: 200px;
Ancho: 200px;
Color de fondo: #1ECE85;

Aquí:

• Hemos usado el "margen"Propiedad para especificar el espacio alrededor del elemento.
• Entonces el "alturaSe utiliza el atributo para asignar la altura al elemento.
• El "ancho"La propiedad se establece como"200px"Para definir el ancho del elemento.
• "color de fondo"La propiedad CSS asigna el color para el fondo del elemento.

La imagen resultante describe la salida del código anterior:

Paso 5: Crea fondo como texturizado

Ahora, aplique las siguientes propiedades de CSS para que el fondo texturice:

.textura-1
Imagen de fondo: gradiente de repetición-lineal (36deg, RGBA (255, 253, 253, 0.1), RGBA (255,255,255, 0.1) 1px, transparente 0px, transparente 2px);

Primero, usa el ".texturizado-1Clase para acceder al primer elemento y aplicar las diversas propiedades:

• "imagen de fondoLa propiedad se utiliza para configurar la imagen en la parte posterior del elemento.
• "gradiente de repetición-lineal”Es una función utilizada para establecer la imagen de fondo. Esta función CSS hace que una imagen consista en repetir gradientes lineales.
• Luego, establezca el ángulo como "36 grados"Para repetir grados de gradiente inclinados.
• Después de eso, especifique el color para el gradiente de repetición-lineal como "RGBA (255, 253, 253, 0.1)" y "RGBA (255,255,255, 0.1) 1px".
• Por último, agregue transparencia a la imagen de fondo.

Aplicemos un fondo de textura para el segundo "":

.textura-2
Image de fondo: URL (/hojas.png);
Repeat de fondo: repetir;

Ahora, acceda al segundo "" usando ".textura-2". Luego, aplique el "imagen de fondo"Propiedad y establecer la imagen utilizando la URL de esa imagen. Después de eso, el "repeticiónEl atributo se usa para repetir la imagen en la parte posterior.

Producción

Se puede observar que hemos creado con éxito los fondos texturizados.

Conclusión

Para crear los fondos texturizados, primero, cree un "" envase. Luego, agregue dos contenedores más "" de la misma manera y asignarles las clases. Después de eso, acceda a los elementos utilizando sus respectivas clases y aplique el "imagen de fondo" y "repetición" propiedades. Esta publicación ha explicado el procedimiento para crear fondos texturizados.