CSS - Fundos

Propriedades de Fundo

background-color: red;

background-color: rgb(255, 0, 0);

background-color: #ff0000;

background-color: hsl(0, 100%, 50%);

background-color: rgba(255, 0, 0, 0.5);

background-image: url('image.jpg');

background-image: url('image1.jpg'), url('image2.jpg');

background-repeat: no-repeat;

background-attachment: fixed;

background-position: top right;

background-position: 50% 50%;

background-position: 100px 200px;

background-size: 200px 300px;

background-size: 50% 50%;

background-origin: border-box;

background-clip: padding-box;

Propriedade Resumida de Plano de Fundo

A propriedade resumida background permite definir várias propriedades de plano de fundo em uma única declaração. Isso pode tornar seu código CSS mais curto e fácil de ler.

A ordem dos valores na propriedade resumida é:

background: <background-color> <background-image> <background-repeat> <background-attachment> <background-position> / <background-size>;

Você pode combinar estas propriedades de plano de fundo:

background-color: #ff0000;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;

Em uma única declaração resumida:

background: #ff0000 url('image.jpg') no-repeat fixed center / cover;

Observe que o valor de background-size é separado do valor de background-position por uma barra (/).

Ao usar a propriedade resumida, os valores omitidos serão definidos com seus valores padrão. Se você quiser que todas as propriedades de plano de fundo sejam explicitamente definidas, inclua todos os valores necessários na declaração resumida.

O uso da propriedade resumida background pode ajudar a simplificar seu código CSS e torná-lo mais fácil de manter. No entanto, se você precisa definir apenas uma ou duas propriedades de plano de fundo, pode ser mais legível usar propriedades individuais em vez da forma resumida.

Múltiplos Planos de Fundo

O CSS permite que você sobreponha várias imagens de fundo em um único elemento. Essa técnica pode criar efeitos visuais interessantes e adicionar profundidade aos seus designs.

Para especificar várias imagens de fundo, você pode usar uma lista separada por vírgulas de valores de imagem de fundo na propriedade background-image ou na propriedade abreviada background.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
}

Você também pode combinar várias imagens de fundo com outras propriedades. Ao usar a propriedade abreviada background, os valores para cada camada são separados por vírgulas.

.element {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') repeat-x top;
}

Você também pode especificar diferentes tamanhos, posições e outras propriedades para cada camada.

.element {
  background: url('image1.jpg') no-repeat center/cover,
              url('image2.jpg') repeat-x top/50% auto;
}

Ao usar múltiplos planos de fundo, a primeira imagem especificada ficará no topo. As imagens subsequentes serão dispostas abaixo dela na ordem em que são declaradas.

Múltiplos planos de fundo oferecem opções para criar designs visualmente ricos usando CSS. Experimente diferentes combinações de imagens, posições, tamanhos e outras propriedades para alcançar os efeitos desejados.

Gradientes de Fundo

O CSS permite criar transições de cores conhecidas como gradientes para fundos. Você pode criar gradientes lineares ou radiais sem usar arquivos de imagem, resultando em tempos de carregamento mais rápidos.

Para criar um gradiente linear, use a função linear-gradient() como valor para a propriedade background ou background-image. Especifique a direção do gradiente e as cores entre as quais você deseja fazer a transição.

.element {
  background: linear-gradient(to right, red, blue);
}

Isso cria um gradiente que faz a transição do vermelho na esquerda para o azul na direita. Você pode especificar a direção usando palavras-chave como to top, to bottom, to left, to right, ou um ângulo em graus.

As paradas de cor controlam onde cada transição de cor ocorre. Por padrão, as transições são distribuídas uniformemente, mas você pode especificar porcentagens ou comprimentos para controlar suas posições.

.element {
  background: linear-gradient(to right, red 0%, blue 50%, green 100%);
}

Para criar um gradiente radial, use a função radial-gradient(). Especifique a posição central, forma (círculo ou elipse) e as paradas de cor.

.element {
  background: radial-gradient(circle at center, red, blue);
}

Isso cria um gradiente circular centralizado dentro do elemento que faz a transição do vermelho no centro para o azul nas bordas.

Você pode criar gradientes mais complexos especificando várias paradas de cor e usando transparência.

.element {
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
}

Os gradientes podem ser combinados com outras propriedades de fundo como background-size e background-repeat para criar vários efeitos.

.element { 
  background: repeating-linear-gradient(45deg, red, blue 10%);
} 

Os gradientes CSS oferecem uma maneira de criar fundos visualmente atraentes sem depender de arquivos de imagem. Experimente diferentes cores, direções e paradas de cor para alcançar os efeitos desejados.

Mistura de Plano de Fundo

A propriedade background-blend-mode no CSS permite misturar imagens de fundo e cores dentro de um elemento. Isso cria efeitos visuais combinando vários planos de fundo usando diferentes modos de mistura.

Os modos de mistura disponíveis são:

• normal: O modo padrão; nenhuma mistura é aplicada.
• multiply: Multiplica a cor de fundo com a imagem, resultando em um efeito mais escuro.
• screen: Multiplica o inverso da cor de fundo com a imagem, resultando em um efeito mais claro.
• overlay: Aplica uma combinação de multiply e screen com base na cor de fundo.
• darken: Seleciona os valores de cor mais escuros da imagem e da cor de fundo.
• lighten: Seleciona os valores de cor mais claros da imagem e da cor de fundo.

Outros modos de mistura incluem: color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, e luminosity.

Para usar a mistura de fundo, aplique vários planos de fundo a um elemento e depois especifique o modo de mistura desejado com a propriedade.

.element {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-blend-mode: multiply;
}

Você também pode misturar imagens com cores.

.element {
  background: url('image.jpg'), #ff0000;
  background-blend-mode: screen;
}

Se você tiver vários planos de fundo, pode especificar vários modos para cada camada.

.element {
  background: url('image1.jpg'), url('image2.jpg'), #ff0000;
  background-blend-mode: multiply, overlay;
}

A mistura de plano de fundo abre muitas possibilidades criativas para combinar imagens e cores. Experimentar ajudará a alcançar os efeitos desejados.

Opacidade de Fundo

A opacidade de cores e imagens de fundo em CSS pode ser controlada usando a propriedade opacity ou usando valores de cor RGBA ou HSLA.

A propriedade opacity define a opacidade geral de um elemento, incluindo seu conteúdo e fundo. Ela aceita um valor entre 0 (totalmente transparente) e 1 (totalmente opaco).

.element {
  background-color: #ff0000;
  opacity: 0.5;
}

No entanto, usar a propriedade opacity afeta o elemento inteiro, incluindo seu conteúdo. Se você quiser controlar apenas a opacidade da cor ou imagem de fundo sem afetar o conteúdo, pode usar valores de cor RGBA ou HSLA.

RGBA significa Vermelho, Verde, Azul, Alpha; onde alpha representa a opacidade. HSLA significa Matiz, Saturação, Luminosidade, Alpha; com alpha servindo ao mesmo propósito.

.element {
  background-color: rgba(255, 0, 0, 0.5);
}

Você também pode usar valores de cor RGBA ou HSLA com imagens de fundo.

.element {
  background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)), 
                    url('image.jpg');
}

Usar RGBA ou HSLA permite controlar a transparência independentemente do conteúdo, proporcionando flexibilidade na criação de designs visualmente interessantes.

Padrões de Fundo

Padrões de fundo adicionam textura e interesse visual às suas páginas web. Você pode criar padrões de fundo repetitivos usando imagens pequenas e técnicas de CSS para repetição contínua.

Para criar um padrão de fundo repetitivo, comece selecionando ou criando uma imagem pequena que possa ser replicada de forma contínua. A imagem deve ter bordas que se encaixem quando repetidas horizontal e verticalmente.

.element {
  background-image: url('pattern.png');
  background-repeat: repeat;
}

.element {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

.element {
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), 
                    url('pattern.png');
  background-repeat: repeat;
}

Imagens de Fundo Responsivas

O design web responsivo proporciona experiências ideais aos usuários em diferentes dispositivos. Usar imagens de fundo responsivas significa fornecer tamanhos e resoluções de imagem apropriados com base no tamanho da tela do visualizador.

Uma técnica é servir diferentes arquivos de imagem com base no tamanho da tela do dispositivo. Você pode definir várias propriedades background-image usando media queries.

.element {
  background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
  .element {
    background-image: url('medium-image.jpg');
  }
}

@media (min-width: 1200px) {
  .element {
  background-image: url('large-image.jpg');
  }
}

.element {
  background-image: image-set(
    url('image-1x.jpg') 1x,
    url('image-2x.jpg') 2x
  );
}

.element {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
}

.element {
  background-image: url('pattern.svg');
}