Como alterar a cor de fundo com CSS

Como alterar a cor de fundo com CSS

Um dos momentos mais emocionantes na carreira de qualquer desenvolvedor de front-end em ascensão é aprender como alterar a cor de fundo de uma página da web.





Trabalhar com HTML é ótimo e tudo, mas com apenas algumas linhas de CSS você pode fazer suas páginas e sua jornada de programação florescerem para a vida.



Este guia cobrirá tudo que você precisa saber sobre como alterar a cor de fundo com CSS.





Prepare-se

Vamos fazer um pequeno trabalho preliminar.

windows 10 identificando sem acesso à internet

Observação : Eu recomendo usar Código Visual Studio com o Extensão Live Server para ver as alterações em tempo real à medida que atualiza o HTML e CSS.



  1. Crie uma pasta para os arquivos do seu projeto.
  2. Criar um index.html arquivo para hospedar seu HTML. Você pode usar o código padrão ou apenas configurar alguns , , e Tag.
  3. Criar uma styles.css arquivo para seu CSS.
  4. Vincule seu arquivo CSS com o HTML, colocando dentro de Tag.

Agora você está pronto para começar a editar o CSS.

Relacionado: Como criar um site padrão



Como alterar a cor de fundo com CSS

A maneira mais simples de alterar a cor de fundo é direcionando o corpo marcação. Em seguida, edite o cor de fundo propriedade. Você pode encontrar códigos de cores pesquisando e usando a extensão do navegador Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Este código muda o fundo para um belo azul claro.



o cor de fundo propriedade aceita cores em seis formas diferentes:

  • nome : azul claro; (para uma aproximação)
  • código hexadecimal : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); Onde para é alfa (opacidade)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); Onde para é alfa (opacidade)

Use a abreviatura fundo propriedade no lugar de cor de fundo para cortar código extra. Você pode alterar a cor de fundo de qualquer elemento HTML usando este método.

Criar uma elemento e dê a ele uma classe - neste caso, a classe é painel . Defina o seu altura e largura propriedades em CSS. Selecione o elemento em CSS e tire a cor.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Aqui você pode ver o corpo fundo propriedade é estilizada independentemente do .painel fundo propriedade.

A propriedade background também aceita gradientes:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Como alterar a imagem de fundo em CSS

E se você quiser que o plano de fundo seja uma imagem em vez de uma cor sólida ou gradiente? A taquigrafia fundo propriedade é um amigo familiar.

Certifique-se de que a imagem esteja na mesma pasta que seus arquivos HTML e CSS. Caso contrário, você terá que usar o caminho do arquivo entre parênteses em vez de apenas o nome:

body {
background: url(leaves-and-trees.jpg)
}

Uau! Parece que a imagem está muito ampliada. Você pode corrigir isso com o tamanho do fundo propriedade.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Para usar a abreviação fundo propriedade em conjunto com o tamanho do fundo propriedade cobrir , você também deve especificar posição de fundo propriedades e separe os valores com uma barra invertida (mesmo que sejam valores posicionais padrão, como superior esquerdo .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Ai está! Uma imagem de plano de fundo de tamanho adequado em uma linha de CSS.

Consulte Mais informação: Como definir uma imagem de fundo em CSS

Observação : Tenha cuidado ao incluir imagens de fundo grandes que ocupam muito espaço de armazenamento. Pode ser difícil carregá-los no celular, onde você tem apenas dois segundos para dar aos usuários um motivo para permanecer na página.

Aprimore seu jogo CSS com CSS box-shadow

Para um desenvolvedor como você, as propriedades da cor de fundo e da imagem de fundo são notícias antigas. Felizmente, sempre há algo novo para aprender.

Experimente dar um impulso às suas caixas com box-shadow CSS. Seus elementos HTML nunca estiveram tão bonitos!

Compartilhado Compartilhado Tweet O email Como usar CSS box-shadow: 13 truques e exemplos

Caixas sem graça parecem chatas. Enfeite-os com o efeito de sombra de caixa CSS!

Leia a seguir Tópicos relacionados
  • Programação
  • Desenvolvimento web
  • Designer de Web
  • CSS
Sobre o autor Marcus Mears III(26 artigos publicados)

Marcus é um entusiasta de tecnologia ao longo da vida e Editor Editor da MUO. Ele embarcou em sua carreira de escritor freelance em 2020, cobrindo tendências de tecnologia, gadgets, aplicativos e software. Ele estudou Ciência da Computação na faculdade com foco no desenvolvimento front-end da web.

Mais de Marcus Mears III

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever