Latest web development tutorials

CSS Fundos (ao fundo)

propriedades do fundo do CSS são usadas para definir o plano de fundo de elementos HTML.

propriedades CSS definir os efeitos de fundo:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Cor de fundo

propriedade background-color define a cor de fundo do elemento.

cor de fundo da página para usar no seletor do corpo:

Exemplos

body {background-color:#b0c4de;}

tente »

CSS, os valores de cor são geralmente definidas da seguinte forma:

  • Hex - tais como: "# FF0000"
  • RGB - tais como: "RGB (255,0,0)"
  • nomes de cores -, tais como: "vermelho"

O exemplo a seguir, h1, p, e elementos div têm diferentes cores de fundo:

Exemplos

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

tente »

imagem de fundo

atributo background-image descreve os elementos de imagem de fundo.

Por padrão, a imagem de fundo é exibida repetidamente exibido para cobrir toda a entidade elemento.

Página exemplos de ajuste imagem de fundo:

Exemplos

body {background-image:url('paper.gif');}

tente »

Aqui está um exemplo de uma má combinação de imagem de fundo de texto e. Textos legibilidade:

Exemplos

body {background-image:url('bgdesert.jpg');}

tente »

imagens de fundo - azulejos horizontal ou vertical

Por padrão, a propriedade background-image é lado a lado na orientação horizontal ou vertical da página.

Se algumas imagens lado a lado horizontalmente e verticalmente, de modo que parece muito coordenada, como segue:

Exemplos

body
{
background-image:url('gradient2.png');
}

tente »

Se um bloco de imagem (repetir-x) somente na direção horizontal, o fundo da página vai ser melhor:

Exemplos

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

tente »

Imagem de fundo - Definir posição e não da telha

observação Deixe a imagem de fundo não afeta a disposição do texto

Se você não quiser que a imagem lado a lado, você pode usar a propriedade background-repeat:

Exemplos

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

tente »

O exemplo acima, a imagem de fundo eo texto aparece no mesmo local, a fim de fazer o layout da página mais razoável, não afeta a leitura do texto, podemos mudar a localização da imagem.

Background propriedade-posição pode ser usada para mudar a imagem de fundo aqui:

Exemplos

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

tente »

Antecedentes - propriedade estenográfica

No exemplo acima, podemos ver a cor de fundo da página através de um monte de atributos para controlar.

Para simplificar o código para essas propriedades, podemos usar esses atributos são combinados na mesma propriedade.

cor de fundo propriedade estenográfica para o "fundo":

Exemplos

body {background:#ffffff url('img_tree.png') no-repeat right top;}

tente »

Ao usar a propriedade abreviada, a ordem de valores de atributos como ::

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Todos esses atributos não precisa usar, você pode usar de acordo com as necessidades reais da página.

Este exemplo usa CSS descrito anteriormente, você pode ver o exemplo: Exemplos CSS

Exemplos

mais exemplos

Como definir uma imagem de fundo fixa
Este exemplo demonstra como definir uma imagem de fundo fixo. A imagem não irá rolar com o resto da página.

propriedades do fundo do CSS

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。