Cores e Fundos (background)

CSS oferece várias maneiras de definir cores e estilizar o fundo dos elementos.

1. Formatos de Cores

Nomes de Cores: red, blue, green, tomato.
HEX (Hexadecimal): #RRGGBB (ex: #ff0000 para vermelho).
RGB (Red, Green, Blue): rgb(255, 0, 0).
RGBA (com transparência): rgba(255, 0, 0, 0.5) (50% de transparência).
HSL (Hue, Saturation, Lightness): hsl(0, 100%, 50%).
HSLA (com transparência): hsla(0, 100%, 50%, 0.5).

.texto-vermelho {
    color: red; /* ou #ff0000 ou rgb(255,0,0) */
}
.fundo-transparente {
    background-color: rgba(79, 70, 229, 0.7); /* Cor primária com 70% de opacidade */
}

2. Background-Color

.caixa {
    background-color: #e2e8f0; /* Cor --claro */
    padding: 10px;
}

Este elemento tem um fundo cinza claro.

3. Background-Image

.com-imagem {
    background-image: url('https://via.placeholder.com/100');
}
.com-gradiente {
    background-image: linear-gradient(to right, #4f46e5, #7c3aed);
}

Imagem de Fundo:

Imagem repetida

Gradiente Linear:

Gradiente

4. Outras Propriedades de Fundo

background-repeat: Controla a repetição da imagem (no-repeat, repeat-x, repeat-y, repeat).
background-position: Define a posição inicial da imagem (center, top right, 50% 50%).
background-size: Define o tamanho da imagem (cover, contain, 100px 50px).
background-attachment: Define se a imagem rola com a página (scroll) ou fica fixa (fixed).

.fundo-completo {
    background-image: url('https://source.unsplash.com/random/400x200');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Imagem de fundo completa

5. Shorthand (Atalho) `background`

É uma boa prática combinar todas as propriedades de fundo em uma única declaração, na seguinte ordem: color image repeat attachment position / size.