Contente

• Dar um passo
• Método 1 de 4: definindo uma cor de fundo sólida
• Método 2 de 4: usando uma imagem como plano de fundo
• Método 3 de 4: crie um fundo gradiente
• Método 4 de 4: defina uma animação colorida como papel de parede

Para ser capaz de definir o plano de fundo de uma página da web em HTML, você só precisa fazer uma pequena alteração no elemento "corpo" dentro do estilo> / estilo> Tag. As etapas dependem de como você deseja que seu papel de parede fique. Aprenda como definir o plano de fundo do seu site como uma cor sólida, imagem, gradiente ou animação colorida.

Dar um passo

Método 1 de 4: definindo uma cor de fundo sólida

1. Abra seu arquivo HTML em seu editor de texto favorito. A partir do HTML5, o atributo HTML bgcolor> não é mais compatível. A cor de fundo, como todos os outros aspectos de estilo de sua página, deve ser definida com CSS.
2. Adicione o estilo> / estilo> marca seu documento. Todos os dados de estilo de sua página (incluindo a cor de fundo) devem ser codificados nessas tags. Você tem o estilo> tags já indicadas, então você pode simplesmente rolar para essa parte do arquivo.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Digite o elemento "corpo" dentro do estilo> / estilo> Tag. Qualquer coisa que você alterar no elemento "body" no CSS afetará a página inteira.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Adicione a propriedade "background-color" ao elemento "body". Neste contexto, apenas uma grafia de "cor" funcionará (não: cor).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Coloque a cor de fundo desejada atrás de "cor de fundo". Agora você pode indicar o nome de uma cor (verde, azul, edetc.), use códigos hexadecimais (hex) (por exemplo, #000000 para preto, # ff0000 para vermelho, etc.) ou digitando o valor RGB para a cor (como rgb (255,255,0) para amarelo). Abaixo está um exemplo com códigos hexadeximais, tornando o fundo igual ao banner do wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / estilo> / cabeça> corpo> / corpo> / html>

   • Branco: #FFFFFF
   • Luz rosa: # FFCCE6
   • Sienna queimado: #993300
   • Indigo - # 4B0082
   • Tolet - # EE82EE
   • Confira o seletor de cores HTML de w3schools.com para encontrar os códigos hexadecimais de qualquer cor que desejar.
6. Use "cor de fundo" para aplicar cores de fundo a outros elementos. Assim como você define o elemento do corpo, você pode usar a cor de fundo para definir os planos de fundo de outros elementos. Basta colocar esses elementos dentro do estilo> / estilo> com a propriedade background-color.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {cor de fundo: laranja; } p {cor de fundo: rgb (255,0,0); } / style> / head> body> h1> Este cabeçalho obtém um fundo laranja / h1> p> Este parágrafo obtém um fundo vermelho / p> / body> / html>

Método 2 de 4: usando uma imagem como plano de fundo

1. Abra o arquivo HTML em um editor de texto. Muitas pessoas preferem usar uma imagem como plano de fundo para seus sites. Com isso, você pode definir um padrão, textura, foto ou qualquer outra imagem como plano de fundo. Em HTML5, todos os fundos devem ser definidos com CSS (Cascading Style Sheets) dentro do estilo> / estilo> Tag.
2. Adicione o estilo> / estilo> tags ao seu arquivo HTML. Todos os dados de estilo de sua página (incluindo a cor de fundo) devem ser indicados dentro dessas tags. Você já estilo> conjunto de tags, vá até essa parte do arquivo.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Digite o elemento "corpo" dentro do estilo> / estilo> Tag. Qualquer coisa que você alterar no elemento "body" em CSS afetará a página inteira.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Adicione a propriedade "background-image" ao elemento "body". Ao adicionar esta propriedade, você precisará do nome do arquivo de sua imagem. Certifique-se de que a imagem seja salva na mesma pasta do arquivo html (ou adicione o caminho completo do arquivo ao seu servidor web).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); cor de fundo: # 93B874; } / estilo> / cabeça> corpo> / corpo> / html>

   • É uma boa ideia incluir o código cor de fundo apenas no caso de a imagem de fundo não carregar.
5. Camada de várias imagens. Você pode empilhar várias imagens umas sobre as outras. Isso pode ser útil se você tiver imagens com fundos transparentes que se complementam quando sobrepostos.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); cor de fundo: # 93B874; } / estilo> / cabeça> corpo> / corpo> / html>

   • A primeira imagem está no topo. A segunda imagem está abaixo da primeira.

Método 3 de 4: crie um fundo gradiente

1. Use CSS para criar um fundo gradiente. Se você está procurando por algo um pouco mais estilizado do que uma cor sólida, mas não tão ocupado quanto uma animação colorida, experimente um fundo gradiente. Gradientes são cores que mudam para outras igualdades. Você pode usar CSS para criar e ajustar seu gradiente. Antes de começar a criar um gradiente de cor, você deve obter conhecimento suficiente dos fundamentos da formatação de uma página da web com CSS.
2. Compreenda a sintaxe padrão. Ao criar um gradiente, você precisará de duas informações: o ponto inicial e o ângulo inicial, e as cores entre as quais ocorrerá a transição. Você pode selecionar várias cores que se sobrepõem e pode especificar uma direção ou um ângulo para o gradiente.

   fundo: gradiente linear (direção / ângulo, cor1, cor2, cor3, etc.);

3. Crie um gradiente vertical. Se você não indicar uma direção, a cor correrá de cima para baixo. Navegadores diferentes têm versões diferentes da função gradiente, portanto, você precisará adicionar versões diferentes do código.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Isso é necessário para garantir que o gradiente se estenda por toda a página * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: gradiente linear (# 93B874, # C9DCB9); / * Sintaxe padrão (deve ser a última) * / background-color: # 93B874; / * É uma boa idéia definir uma cor de fundo, caso o gradiente não carregue * /} / style> / head> body> / body> / html>

4. Crie um gradiente com uma direção. Adicionar uma direção ao gradiente permite ajustar a forma como a cor muda. Observe que navegadores diferentes interpretarão as direções de maneira diferente. Todos eles mostrarão o mesmo gradiente de cor.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } corpo {fundo: -webkit-linear-gradiente (esquerda, # 93B874, # C9DCB9); / * da esquerda para a direita * / background: -o-linear-gradient (right, # 93B874, # C9DCB9); / * fim à direita * / background: -moz-linear-gradient (right, # 93B874, # C9DCB9); / * fim à direita * / fundo: gradiente linear (à direita, # 93B874, # C9DCB9); / * move para o lado direito * / background-color: # 93B874; / * é uma boa ideia definir uma cor de fundo, caso o gradiente não carregue * /} / style> / head> body> / body> / html>

5. Use outras propriedades para ajustar o gradiente. Você pode fazer muito mais com gradientes.
   • Por exemplo, você não pode apenas usar mais de duas cores, mas também colocar uma porcentagem atrás de cada uma. Com isso, você pode indicar quanto espaço cada segmento de cor terá.

     fundo: gradiente linear (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Adicione transparência às cores. Com isso, você pode esmaecer as cores. Use a mesma cor para desaparecer da cor para nada. Você vai adorar a função rgba () deve usar para indicar a cor. O valor final determina o grau de transparência: 0 para opaco e 1 para transparente.

     fundo: gradiente linear (para a direita, rgba (147,184,116,0), rgba (147,184,116,1));

Método 4 de 4: defina uma animação colorida como papel de parede

1. Navegar para estilo> em seu código HTML. Se você encontrar uma cor de fundo sólida, mas não, experimente alterar as cores de fundo. A partir do HTML 5, as cores de fundo devem ser definidas com CSS (Cascading Style Sheets). Se você nunca definiu uma cor de fundo com CSS, leia a seção sobre como definir uma cor de fundo sólida antes de tentar este método.
2. Adicione a propriedade animação ao elemento "corpo". Você terá que adicionar 2 propriedades diferentes, pois cada navegador requer um código diferente.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animação: colorchange 60s infinito; } / estilo> / cabeça> corpo> / corpo> / html>

   • -webkit-animation a propriedade é necessária para navegadores baseados no Chrome (Chrome, Opera, Safari). animação é o padrão para todos os outros navegadores.
   • mudança de cor é o que é chamado de animação neste exemplo.
   • anos 60 é a duração (60 segundos) da animação / transição. Certifique-se de definir isso para o webkit e a sintaxe padrão.
   • infinito indica que a animação deve se repetir indefinidamente. Se você preferir fazer um loop nas cores e depois parar na última cor, pode omitir esta parte.
3. Adicione cores à sua animação. Agora você vai usar a regra @keyframes para definir as cores de fundo a serem percorridas, bem como por quanto tempo cada cor pode ser vista na página. Novamente, você terá que adicionar várias codificações para os vários navegadores.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animação: colorchange 60s infinito; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / estilo> / cabeça> corpo> / corpo> / html>

   • Observe que as duas linhas (@ -webkit-keyframes e @keyframes têm os mesmos valores para as cores e percentagens de fundo. Deve permanecer uniforme para que a experiência permaneça a mesma para todos os navegadores.
   • As percentagens (0%, 25%, etc.) representam a duração total da animação (anos 60) Quando a página for carregada, o fundo terá a cor definida para 0% e (# 33FFF3) Quando 25% ou 60 segundos da animação forem reproduzidos, o plano de fundo fará a transição para # 78281F, e assim por diante.
   • Você pode ajustar a duração e as cores conforme desejado.