Como adicionar fundos de diversão CSS aos seus sites

Sep 12, 2025

Como

O tempo era um fundo de página da web era uma pequena imagem de ladrilhos - e muitas vezes hedionda, agredindo os olhos de todos os visitantes. Hoje, os fundos formam a base de muito design gráfico on-line.

Esta revolução em origens na web foi impulsionada por avanços no CSS. Os padrões da Web agora oferecem muito mais controle, para que você possa definir cuidadosamente a posição de uma formação, trabalhar com gradientes e adicionar vários fundos a um único elemento.

Cobrir tudo nesta área exigiria um livro, e então escolhemos alguns pontos de partida importantes para você ir, e o link de escolha estranha para você explorar mais. Aproveitar!

Adicionar fundos de CSS aos elementos da página da Web

Fundos CSS exigem o fundo propriedade de taquigrafia, ou o uso de propriedades mais específicas, como (mas não limitadas a): cor de fundo ; imagem de fundo ; Posição de antecedentes ; fundo de tamanho ; fundo de repetição ; e Anexo de fundo. . Estes podem ser definidos para o plano de fundo da página da web (através do corpo seletor) ou elementos de página como títulos, divs e assim por diante.

No nível mais básico, você poderia usar fundo Para virar uma página vermelha:

 corpo {
 Fundo: vermelho;
 }

Indo um pouco mais avançado, você pode adicionar uma imagem que é centralizada horizontalmente, 20px a partir do topo de seu contêiner, não repetida e fixa no local como os rolos da página da Web:

 corpo {
 Antecedentes: URL (Image.png) Centro 20px Não-repetição fixa;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Uma imagem como pano de fundo (Nota: Evite este baixo nível de contraste em seus próprios desenhos)

Se você quisesse escrever isso sem usar fundo taquigrafia, seria assim:

 corpo {
 Background-Image: URL (Image.png);
 Fundo-Posição: Centro 20px;
 Fundo-Repetir: Não repetir;
 Anexo de fundo: fixo;
 }

Se você quiser adicionar vários fundos a um elemento, você pode vírgula - separar conjuntos de valor na declaração CSS. Observe que o item é especificado primeiro é no topo da pilha, o que significa que ele será exibido 'acima' outros fundos.

 corpo {
 Antecedentes: URL (Image.png) Center 20px Não-Repetir Fixo, URL (Image-2.png) Centro Centro Não repetido;
 }

Nesse caso, uma imagem aparece conforme no exemplo anterior e o 'abaixo' diretamente no centro da área de conteúdo.

Redimensionar imagens de fundo

Até agora, evitamos fundo de tamanho . Mas isso é muito importante, porque permite que você controle o tamanho de uma imagem de fundo. Especificamente, você pode definir as dimensões horizontais e verticais de uma imagem em pixels ou termos percentuais, como:

 Fundo de tamanho: 200px 50px;

Há também dois valores de palavra-chave, que podem ser usados em vez disso: conter e cobrir . Estes são amplamente semelhantes, ao fornecer uma maneira de dimensionar uma imagem dentro da área de conteúdo de um elemento. A diferença é que conter é projetado para criar uma imagem o mais grande possível, enquanto ainda mostrando tudo dentro da área de conteúdo (o que significa que você geralmente recebe lacunas em torno dele), enquanto que cobrir Abrange completamente a área de conteúdo, mas pode resultar em parte da imagem não sendo visível. Este último é comumente usado em sites que usam fotografias como fundos.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'contém' (superior) versus valores 'capa' (inferior)

Note que você pode adicionar fundo de tamanho para A. fundo definição de taquigrafia - coloque-o após o Posição de antecedentes Valores, com uma barra de avanço que separa os dois:

 ANTECEDENTE: URL (Image.png) Center 20px / Contenha sem repetição

Use imagens de fundo retina high-res

Ao adicionar fundos de retina de alta resolução, fundo de tamanho Também é útil para forçar essas imagens a aparecer no tamanho correto.

Por exemplo, imagine um divã com um eu ia de logotipo . Isso, adequadamente, tem um logotipo aplicado como pano de fundo em CSS. É 150 pixels quadrados, e assim o CSS básico que você usaria é:

 #logo {
 Largura: 150px;
 Altura: 150px;
 Antecedentes: URL (logotipo.png) sem repetição;
 }

High-Res complica as coisas. Não queremos forçar o hardware mais antigo a carregar imagens maiores e, portanto, uma consulta de mídia deve ser usada para carregar o logotipo de alta resolução apenas no hardware suportado.

 @Media (-Webkit-min-Device-Pixel-Ratio: 2),
 (Min-Resolução: 192DPI) {
  #logo {
   Background-Image: URL ([email protected]);
  }
 }

O problema agora é a imagem de alta resolução do @ 2x é 300 pixels quadrados (já que tem duas vezes a resolução do original), mas usado como pano de fundo para um recipiente de 150 pixels-quadrados. Então, neste momento, você só vê um quarto disso.

A high-res image before a resize fix — Uma imagem de alta resolução antes de uma correção de redimensionamento

Isso é fixado atribuindo um fundo de tamanho valor para #logotipo :

 #logo {
 Largura: 150px;
 Altura: 150px;
 Antecedentes: URL (logotipo.png) sem repetição;
 plano de fundo: 150px 150px;
 }

O logotipo de alta resolução, agora confortavelmente dentro de seu contêiner

Um método mais moderno de trabalhar com várias resoluções de fundo e alcançar o mesmo resultado é de CSS4 Conjunto de imagens :

 #logo {
 Fundo-Imagem: Conjunto de imagens (
  URL (logotipo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Os benefícios de Conjunto de imagens são mais simples CSS e o agente do usuário que determina a imagem que deve ser usada. A desvantagem é o suporte do navegador - no momento da escrita - permanece incompleto. Visite esta página de teste Para obter um meio de verificar como os navegadores você suporta a tarifa. (Isso talvez seja por isso que muitos designers Use scripts para automatizar serviços de alta resolução de servir .)

Trabalhe com canais alfa e gradientes

Nossa dica final neste artigo em chamas (em termos de tutorial do site) diz respeito a canais e gradientes alfa. Quando a internet foi alimentada por vapor, muitas vezes você tinha designers usam gifs 'CheckerBoard' para simular canais alfa (todos os outros pixel eram transparentes). Agora, você acabou de atribuir cores no RGBA:

 Main {
 Antecedentes: RGBA (255,255,255,0,7);
 }

No exemplo acima, o fundo seria de 70 por cento branco, permitindo que o que seja abaixo dele para mostrar. Você precisa ter cuidado para manter clareza ao usar fundos semi-transparentes que estão acima de imagens complexas, mas podem ser ótimas para adicionar interesse visual às páginas da Web.

Alpha channels, gradients, and some questionable colour choices — Canais alfa, gradientes e algumas escolhas de cores questionáveis

Da mesma forma, web designers usados para produzir gifs e telha se eles queriam um gradiente como pano de fundo, mas isso não é mais necessário, a menos que você queira festejar como se fosse 1999. Visualmente, você estará querendo CSS3 Gradiente linear e gradiente radial propriedades, para as quais você define direções e paragens de cor.

Aqui está uma regra de CSS com um gradiente básico:

 H1 {
 Fundo: gradiente linear (para a direita, RGBA (255,255,25,55,1), RGBA (255,255,255,0));
}

Isso seria aplicado a títulos de nível - um, dando-lhes um gradiente linear que vai da esquerda para a direita, começando com branco sólido e terminando em branco transparente.

Usar ângulos e várias paradas de cor, você pode ir muito mais longe com gradientes. Para experimentar, tente usar um photoshop Gerador de gradiente CSS. e examinar a saída de código (sendo atentamente, o exemplo vinculado adiciona sintaxe para navegadores mais antigos - basta pegar o Gradiente linear linha para seu próprio uso).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Como a galeria de padrões CSS mostra, você pode fazer coisas realmente extravagantes com gradientes CSS

Se você ficou checando o que os profissionais da Web experientes podem fazer com gradientes e fundo de tamanho , confira o lea Verou CSS3 Patterns Gallery. . Lá você encontrará muitos exemplos ao vivo que usam gradientes CSS para criar todos os tipos de padrões de fundo gravemente impressionantes.

E sim, há uma sugestão de onde viemos em relação aos ataques de globo ocular em alguns deles.Mas, como acontece com tudo, quando se trata de fundos da Web, a chave é garantir o que você adiciona é relevante no contexto do seu design e - mais importante - que os fundos não distraem do conteúdo ou tornam ilegíveis.

Links Relacionados:

Um guia para escrever melhor CSS
Crie um layout responsivo com grade CSS
Truques CSS para revolucionar seus layouts

Como adicionar fundos de diversão CSS aos seus sites

Adicionar fundos de CSS aos elementos da página da Web

Redimensionar imagens de fundo

Use imagens de fundo retina high-res

Trabalhe com canais alfa e gradientes

Como - Artigos mais populares

Como desenhar Asuka de Neon Genesis Evangelion

10 maneiras de construir melhores ambientes mundiais 3D

Comece com ativos no designer de afinidade

Como fazer e usar um mahlstick para pintura

Designer de afinidade: Como usar a ferramenta Caneta

Criar um menu de deslizamento

Obtenha sua cabeça reaja com esses cinco fatores

Aprenda a cultivar folhagem com x-partículas

Categorias