CSS criando fundos texturizados

No CSS, os usuários podem aplicar várias propriedades para colocar o fundo do elemento. Além disso, o CSS também permite que seus usuários adicionem uma imagem texturizada como fundo do elemento. O "imagem de fundo”A propriedade é usada para definir uma ou mais imagens como imagens de fundo. Considerando que a "fundo de repetição”A propriedade CSS torna a imagem de fundo repetir e texturizar.

Neste tutorial, ilustraremos o método para criar um fundo texturizado.

Como criar um fundo texturizado utilizando o CSS?

Siga o procedimento para criar um fundo texturizado, utilizando o CSS.

Etapa 1: Crie um contêiner div

Em um documento HTML, crie um simples “”Elemento com o nome da classe“T-background”.

Etapa 2: Adicionar seção

Então, adicione um “”Tag junto com a“estilo”Atributo e defina o estilo como“Exibição: flex”. Esta propriedade é utilizada para definir o layout ou o comprimento de itens ou elementos flexíveis.

Etapa 3: Faça outro div

Dentro de "”Contêiner, insira outros dois elementos junto com“Textura-1" e "Textura-2Aulas, respectivamente:

Etapa 4: elementos da classe de acesso

Na seção CSS, acesse ambos “div“Contêineres com aulas“Textura-1" e "Textura-2”Usando o seletor de pontos. Em seguida, tente as propriedades de estilo CSS mencionadas:

.Textura-1, .Textura-2
margem: 50px;
Altura: 200px;
Largura: 200px;
Background-Color: #1ece85;

Aqui:

• Nós usamos o “margem”Propriedade para especificar o espaço ao redor do elemento.
• Então o "altura”O atributo é utilizado para alocar a altura ao elemento.
• O "largura”A propriedade é definida como“200px”Para definir a largura do elemento.
• ““cor de fundo”A propriedade CSS aloca a cor para o fundo do elemento.

A imagem resultante descreve a saída do código acima:

Etapa 5: Crie fundo como texturizado

Agora, aplique as seguintes propriedades CSS para tornar o plano de fundo texturizado:

.Textura-1
Antecedentes-imagens: Gradiente linear de repetição (36deg, RGBA (255, 253, 253, 0.1), RGBA (255.255.255, 0.1) 1px, transparente 0px, transparente 2px);

Primeiro, use o “.texturizado-1Classe para acessar o primeiro elemento e aplicar as várias propriedades:

• ““imagem de fundo”A propriedade é usada para definir a imagem na parte traseira do elemento.
• ““gradiente linear repetido”É uma função usada para definir a imagem de fundo. Esta função CSS faz com que uma imagem consista em repetir gradientes lineares.
• Então, defina o ângulo como “36DEG”Para repetir graus de inclinação do gradiente.
• Depois disso, especifique a cor para o gradiente linear de repetição como “rgba (255, 253, 253, 0.1)" e "RGBA (255.255.255, 0.1) 1px”.
• Por fim, adicione transparência à imagem de fundo.

Vamos aplicar um fundo de textura para o segundo”:

.Textura-2
Imagem de fundo: URL (/folhas.png);
Repetição de fundo: repita;

Agora, acesse o segundo “" usando ".Textura-2”. Então, aplique o “imagem de fundo”Propriedade e defina a imagem utilizando o URL dessa imagem. Depois disso, o “fundo de repetição”O atributo é usado para repetir a imagem na parte traseira.

Saída

Pode -se observar que criamos com sucesso os fundos texturizados.

Conclusão

Para criar os fundos texturizados, primeiro, crie um “”Contêiner. Em seguida, adicione mais dois recipientes "" da mesma maneira e atribua -lhes as classes. Depois disso, acesse os elementos usando suas respectivas classes e aplique o “imagem de fundo" e "fundo de repetição”Propriedades. Este post explicou o procedimento para criar fundos texturizados.