7 propriedades de fundo CSS para animar seus designs da Web

O tema de plano de fundo do seu site pode afetar significativamente sua aparência. Cores, imagens e padrões de fundo evocam emoções e criam ótimas experiências de usuário.

Você pode usar as propriedades de plano de fundo CSS para definir o estilo de plano de fundo dos elementos HTML. Aprenda tudo sobre algumas das propriedades CSS que você pode usar para criar fundos excelentes.

1. cor de fundo

O propriedade da cor de fundo define a cor do plano de fundo de um elemento. Você pode definir a cor usando um nome como "red", um valor HEX como "#00FF00" ou um valor RGB - como "rgb (0, 255, 0)". Você também pode usar um valor HSL para definir a cor de fundo usando matiz, saturação e luminosidade.

O exemplo a seguir define a cor de fundo da página inteira como laranja. Cada um dos elementos do título tem um plano de fundo diferente.

<corpo>
<h2>eu sou verdeh2>
<h3>eu sou vermelhoh3>
<h4>eu sou azulh4>
corpo>

Usando CSS, você pode aplicar uma cor de fundo única a cada elemento:

corpo {
cor de fundo: laranja;
}
h2 {
cor de fundo: #006600;
}
h3 {
cor de fundo: rgb(128, 0, 0);
}
h4{
cor de fundo: hsl(240, 100%, 50%);
}

Isso irá estilizar a página para se parecer com:

Você pode usar a propriedade opacity para determinar a transparência de um elemento. A opacidade assume valores entre 0,0 e 1,0. Quanto menor o valor, mais transparente é o elemento.

Por exemplo, tente definir a opacidade de um elemento do corpo para 0,5:

corpo {
cor de fundo:laranja;
opacidade:0.5;
}

Isso será exibido da seguinte maneira - compare as cores com as da captura de tela anterior:

2. imagem de fundo

A propriedade background-image define uma imagem como fundo de um elemento. Você pode referenciar uma imagem local ou uma da internet.

<corpo>
 <h1>Olálá!h1>
 <p>EUterumimagememmeufundo!p>
corpo>

O arquivo CSS:

corpo {
imagem de fundo:url("https://imagens.pexels.com/fotos/1191710/pexels-photo-1191710.jpeg?auto=comprimir&cs=tinysrgb&c=1260&h=750&dpr=1");
}

Isso será exibido assim:

Você também pode usar gradientes de fundo para criar uma aparência única para o seu aplicativo.

3. fundo de repetição

A propriedade background-image repete as imagens por padrão. Você pode optar por repetir a imagem horizontalmente no eixo x ou verticalmente no eixo y.

Como alternativa, se uma repetição não se adequar ao seu estilo, você pode removê-la usando o valor sem repetição.

<corpo>
<h1>Olá!h1>
<h3>Estou demonstrando a propriedade repeat background-repeat no eixo x!h3>
corpo>

Use o seguinte CSS para aplicar um plano de fundo repetitivo ao longo do eixo x:

corpo {
imagem de fundo: url("https://imagens.pexels.com/fotos/459335/pexels-foto-459335.jpeg?auto=comprimir&cs=tinysrgb&c=1260&h=750&dpr=1");
fundo de repetição: repetir-x;
}

O resultado:

Em seguida, tente repetir a imagem no eixo y:

corpo {
imagem de fundo:url("https://cdn.pixabay.com/foto/2016/04/18/22/05/conchas-1337565__340.jpg");
fundo de repetição:repeat-y;
}

O resultado:

O exemplo no eixo y certamente parece distorcido. Se estes não são os padrões que você está procurando, você pode especificar sem repetição em vez de:

corpo {
imagem de fundo:url("https://imagens.pexels.com/fotos/259915/pexels-photo-259915.jpeg?auto=comprimir&cs=tinysrgb&c=600");
fundo de repetição:sem repetição;
}

O resultado:

4. posição de fundo

A propriedade background-position define a posição da imagem de fundo dentro de seu elemento. Ele usa palavras-chave específicas da posição, como Centro, principal, e fundo, ou um valor de pixel ou porcentagem.

Adicione uma propriedade de posição de fundo à última imagem:

corpo {
imagem de fundo: url("https://imagens.pexels.com/fotos/259915/pexels-photo-259915.jpeg?auto=comprimir&cs=tinysrgb&c=600");
posição de fundo: principalCentro;
}

Isso parecerá assim:

Você pode ver que a imagem distorce a aparência do site. Vamos corrigir isso com a próxima propriedade.

5. tamanho de fundo

Você pode usar a propriedade background image para definir um tamanho específico para a imagem. Ele usa palavras-chave como cobrir e conter ou um pixel ou valor percentual. Vamos corrigir a imagem de fundo distorcida adicionando uma propriedade de tamanho de fundo.

corpo {
 imagem de fundo: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 repetição de fundo: sem repetição;
 posição de fundo: centro;

O resultado mostra que a imagem agora cobre a página da web proporcionalmente.

6. anexo de fundo

A propriedade background-attachment define se a posição da imagem de fundo permanece fixa ou rola. Você pode usar as palavras-chave fixed ou scroll.

Vamos mostrar isso no seguinte código:

<corpo>
<h1>A propriedade background-attachmenth1>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
<p>Com a propriedade de anexo fixa, você notará que o fundo não se move com o texto.p>
corpo>

O arquivo CSS:

corpo {
imagem de fundo: url("https://imagens.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=comprimir&cs=tinysrgb&c=600");
fundo de repetição: sem repetição;
posição de fundo: Centro;
tamanho de fundo: cobrir;
anexo de fundo: fixo;
}

Se você mover a página para baixo, notará que o plano de fundo não se move:

Para demonstrar a propriedade de anexo de plano de fundo de rolagem, altere a palavra-chave para rolagem. Você notará que agora o fundo se move com o texto.

corpo {
imagem de fundo: url("https://imagens.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=comprimir&cs=tinysrgb&c=600");
fundo de repetição: sem repetição;
posição de fundo: Centro;
tamanho de fundo: cobrir;
anexo de fundo: rolagem;
}

7. A propriedade abreviada de fundo

Você pode perceber que precisa incluir várias propriedades para obter o plano de fundo perfeito. Isso envolve escrever muito código. Mas você pode encurtar o código usando a propriedade abreviada background.

A propriedade abreviada permite definir muitas propriedades de plano de fundo em uma única linha. Você usa a palavra-chave fundo para definir a propriedade abreviada.

Por exemplo, em vez de escrever código como este:

corpo {
cor de fundo: verde;
imagem de fundo: url("laptop3.jpg");
fundo de repetição: sem repetição;
tamanho de fundo: cobrir;
anexo de fundo: rolagem;
posição de fundo: Centro;
}

Você pode escrevê-lo em uma única linha, assim:

corpo {
fundo: verdeurl("laptop3.jpg") sem repetiçãocobrirrolagemCentro;
}

A propriedade abreviada segue uma ordem específica. Você deve alinhar as propriedades nessa ordem, mesmo que uma ou mais estejam ausentes. A ordem é:

• cor de fundo
• imagem de fundo
• fundo de repetição
• anexo de fundo
• posição de fundo

Você pode criar designs interessantes com CSS usando vários padrões de fundo. Com esses padrões, você pode obter planos de fundo exclusivos e excelentes para o seu site.

Outras propriedades de plano de fundo em CSS

O CSS é poderoso e você pode fazer muito com ele para incrementar seu aplicativo. Você pode usar propriedades como background-clip, background-origin e background-blend-mode para adicionar alguma animação.

Você também pode usar gradientes e padrões para personalizar suas páginas. Experimente as propriedades de plano de fundo do CSS para aprimorar suas habilidades de web design.