freeCodeCamp

5.9 KiB

Raw Blame History

title	localeTitle
Background	fundo

fundo

A propriedade background permite usar imagens e cores para criar planos de fundo para suas páginas da web.

Cor de fundo

A propriedade da cor de fundo permite que você escolha a cor do seu elemento. Isso pode ser o plano de fundo para a página inteira ou o plano de fundo de uma seção da sua página.

Um elemento é um pedaço de HTML, como um cabeçalho ou parágrafo em uma página da web.

Aqui está um exemplo de como definir a cor do plano de fundo de uma página da Web para verde.

  body { 
    background-color: green; 
  }

Aqui está um exemplo de configuração das cores para dois elementos. Isso definirá o plano de fundo do cabeçalho para roxo e o resto da página para azul.

  body { 
    background-color: blue; 
  } 
  h1 { 
    background–color: purple; 
  }

Na cor CSS pode ser definido de três maneiras:

Um nome de cor válido, como blue
Um valor hexadecimal como #FFFFF (este é o valor hexadecimal para branco).
Um valor RGB como rgb(76,175,80) (Esse é o valor RGB para verde claro.)

Imagens de fundo

Você pode usar a propriedade background image para definir uma imagem como plano de fundo para um elemento. A imagem é repetida por padrão para cobrir todo o elemento.

body { 
  background-image: url("barn.jpg"); 
 }

Você também pode vincular fotos ou gifs que encontrar on-line usando o link deles (ou seja, do Google Images, uma pesquisa).

body { 
  background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif"); 
 }

Imagem de fundo - a propriedade de repetição

A imagem de fundo é repetida verticalmente (para cima e para baixo) e horizontalmente (na página da web) por padrão. Você pode usar a propriedade background-repeat para repetir a imagem vertical ou horizontalmente.

Aqui está um exemplo que repete a imagem verticalmente.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: repeat-y; 
 }

Você pode repetir a imagem horizontalmente definindo a propriedade background-repeat para “repeat-x”.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: repeat-x; 
 }

Você também pode usar a propriedade background-repeat para definir uma imagem para não repetir.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
 }

Imagem de fundo - a propriedade de posição

Você pode usar a propriedade position para especificar onde sua imagem estará localizada em uma página da web.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
 }

Imagem de fundo - a posição fixa

Você pode usar a propriedade de anexo de plano de fundo para definir uma imagem para uma posição fixa. Uma posição fixa faz com que uma imagem não rola com o resto da página.

body { 
  background-image: url("barn.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  background-attachment: fixed; 
 }

Gradientes de fundo

Um gradiente é uma transição entre duas ou mais cores e pode ser usado via CSS semelhante a uma imagem de fundo.

A sintaxe de um fundo gradiente pode ser bastante complexa e, muitas vezes, ainda é usada com prefixos de fornecedores devido a inconsistências entre os navegadores suportados.

O Colorzilla Gradient Editor é uma ótima ferramenta on-line para gerar gradientes personalizados e a marcação de CSS associada.

Plano de fundo - a propriedade de taquigrafia

Você pode escrever as propriedades de fundo em uma única linha. Isso é chamado de propriedade abreviada.

body { 
  background: url("barn.jpg") no-repeat right top; 
 }

Você pode deixar de fora as propriedades desnecessárias ao usar a propriedade abreviada, mas as propriedades deve ser usado em uma determinada ordem. A ordem é:

cor
imagem
repetir
anexo
posição

Múltiplas Imagens de Fundo

Você pode especificar várias imagens de fundo em uma única propriedade de plano de fundo.

body { 
  background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)); 
 }

A primeira imagem (ou gradiente) especificada é a mais no topo, a segunda vem depois e assim por diante. Se um dos elementos não estiver correto devido a sua URL ou sua sintaxe, a linha inteira será ignorada pelo navegador.

Algumas propriedades básicas de fundo do CSS

As propriedades de plano de fundo do CSS são usadas para definir os efeitos de segundo plano para elementos.

Propriedades de fundo CSS: cor de fundo imagem de fundo fundo de repetição fundo de ligação posição de fundo

Você pode consultar o seguinte link para as escolas W3 para saber mais sobre o background e assuntos relacionados em CSS. Referência de fundo para W3

5.9 KiB Raw Blame History Unescape Escape