Fundo CSS (Fundo)

As propriedades de fundo do CSS são usadas para definir o estilo de fundo do elemento. CSS Fundo se refere ao ajuste de atributos de fundo do objeto através do CSS, como ajuste de vários estilos de fundo através do CSS.

Propriedades de fundo

As propriedades de fundo do CSS fornecem várias propriedades para o fundo de um elemento, como:background-cor,background-imagem,background-repetição,background-attachmentebackground-positionA próxima seção explicará como usar essas propriedades para definir diferentes estilos de fundo.

Cor de fundo

background-corA propriedade é usada para definir a cor de fundo do elemento.

O exemplo a seguir demonstra como configurar a cor de fundo da página da web.

corpo {fundo-cor:　#f0e68c;}

As cores no CSS são geralmente especificadas pelos seguintes métodos:

• valores hexadecimais-por exemplo "#ff0000"

• valores RGB-por exemplo "rgb(255,0,0)"

• nomes de cores-como "vermelho"

VerNomes de cores CSSpara obter a lista completa de nomes de cores possíveis.

Imagem de fundo

background-imagemA propriedade define a imagem como fundo do elemento HTML.

Veja o exemplo a seguir, que demonstra como configurar a imagem de fundo da página.

corpo {fundo-image: url("leaf.jpg");

repetição do fundo

Por padrão, abackground-imagemA propriedade repete a imagem em ambas as direções, horizontal e vertical.

Ao usarbackground-repetiçãoA propriedade permite que você controle como a imagem de fundo é repetida no fundo do elemento HTML. Você pode configurar a repetição vertical (eixo y), horizontal (eixo x), bidirecional ou repetição bidirecional da imagem de fundo.

Veja o exemplo a seguir, que demonstra como configurar o fundo degradado da página da web através da repetição horizontal das fatias da imagem.

body　{
　　　　background-image: url("gradient.png");
　　　　background-repetir: repetir-x;
　　　　}

Anexar ao fundo

background-attachmentA propriedade determina se a imagem de fundo é fixa em relação à viewport ou se rola junto com o bloco contido.

body　{
　　　　largura:　250px;
　　　　altura:　200px;
　　　　excesso:　scroll;
　　　　background-imagem:　url("recycle.jpg");
　　　　background-attachment:　fixed;
　　　　}

Posição de Fundo

background-positionA propriedade é usada para controlar a posição da imagem de fundo.

Se nãobackground-positionespecificado, a imagem será colocada na posição padrão superior esquerda do elemento, ou seja(0,0). Veja os seguintes exemplos:

body　{
　　　　background-imagem:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　}

No exemplo a seguir, a imagem de fundo está no canto superior direito e a posição da imagem é controlada porbackground-positionpropriedade especificada.

body　{
　　　　background-imagem:　url("tree.jpg");
　　　　background-repeat:　no-repeat;
　　　　background-position:　100%　top;
　　　　}

Propriedade Abreviada de Fundo

Como pode ser visto no exemplo acima, ao lidar com o fundo, é necessário considerar muitos atributos. Também é possível especificar todos esses atributos em um único atributo, para encurtar o código. Isso é chamado de propriedade abreviada.

dobackgroundAs propriedades são usadas para definir todos os atributos individuais de fundo (ou seja, as propriedades abreviadas)background-cor,background-imagem,background-repetição,background-attachmentebackground-position）Em um. Por exemplo:

body　{
　　　　background-cor:　#f0e68c;
　　　　background-image:　url("smiley.png");
　　　　background-repeat:　no-repeat;
　　　　background-attachment:　fixed;
　　　　background-position:　250px　25px;
　　　　}

Ao usar o símbolo de abreviação, o exemplo acima pode ser escrito:

body　{fundo:　#f0e68c　url("smiley.png")　no-repeat　fixed　250px　25px;}

UsarbackgroundQuando usado como propriedade abreviada, a ordem dos valores das propriedades deve ser.

Fundo:Colorido Imagem Repetição Anexado Posição ;

Se ao usar o símbolo de abreviação falta ou não for especificado o valor de um único atributo de fundo, será usado o valor padrão do atributo (se houver).