O CSS fornece várias propriedades que ajudam a criar um site fascinante e a propriedade em segundo plano é uma das propriedades mais importantes que nos permitem definir os antecedentes de qualquer elemento específico, página da web, etc. Individualmente, cada propriedade executa uma funcionalidade exclusiva, no entanto, o CSS fornece algumas funcionalidades para combinar várias propriedades em uma única propriedade. A combinação de várias propriedades em segundo plano em uma única propriedade em segundo plano é conhecida como propriedade abreviada de fundo.

Propriedade abreviada de fundo

É uma propriedade abreviada que pode levar vários valores simultaneamente. É um método abreviado para as seguintes propriedades:

• fundo de repetição
• imagem de fundo
• Antecipação de fundo
• tamanho de fundo
• cor de fundo
• posição de fundo
• origem-origem
• clipe de fundo

A propriedade em segundo plano é representada por "fundo". Você pode combinar qualquer uma das propriedades acima mencionadas no fundo Propriedade abreviada de acordo com sua necessidade.

Sintaxe

A propriedade abreviada de fundo segue a seguinte sintaxe:

Antecedentes: Fundo de fundo de fundo de fundo-repeat-reeat;

Da sintaxe acima mencionada, pode-se observar que o fundo A propriedade abreviada leva várias propriedades separadas pelo espaço. A propriedade em segundo plano segue uma ordem específica para especificar as múltiplas propriedades.

Aqui, antes de pular para as propriedades de segundo plano primeiro, entenderemos como essas propriedades funcionam como um indivíduo. Portanto, consideraremos algumas das principais propriedades de fundo junto com exemplos.

cor de fundo

Uma propriedade que determina a cor de fundo de um elemento.

Exemplo
Este exemplo definirá a cor azul claro como cor de fundo do elemento corporal:

Imagem de fundo

Bem -vindo ao Linuxhint.com

A saída do código acima será assim:

imagem de fundo

A propriedade de imagem de fundo é usada para implementar imagens únicas ou múltiplas no fundo de um elemento.

Exemplo
Este código abaixo dado adicionará uma imagem usando o imagem de fundo propriedade:

Imagem de fundo

Bem -vindo ao Linuxhint.com

Teremos a seguinte saída:

fundo de repetição

Propriedade de repetição de fundo Ative ou desative a repetição da imagem de fundo. Por padrão, a imagem repetida nas duas direções i.e. horizontal vertical. No entanto, usando a propriedade de repetição de fundo, podemos definir a repição de acordo com nossa necessidade e.g. Repita-y para repetição vertical, repetição-x para repetição horizontal ou sem repetição para evitar a repetição.

Exemplo
No exemplo anterior, não especificamos a propriedade de repetição de fundo, portanto, a imagem repetida na horizontal e na vertical. No entanto, o código abaixo dado utiliza o valor sem repetição para desativar a repetição:

Imagem de fundo

Bem -vindo ao Linuxhint.com

Agora, desta vez, a imagem em segundo plano aparecerá apenas uma vez como mostrado na seguinte saída:

posição de fundo

A propriedade de posição de fundo determina a posição da imagem de fundo, como esquerda, superior, direita, inferior, etc.

Exemplo
O exemplo abaixo dado definirá a imagem de fundo no centro da página:

Imagem de fundo

Bem -vindo ao Linuxhint.com

O código acima produzirá a seguinte saída:

Da mesma forma, existem outras propriedades que podem ser usadas para o fundo, como:

• Antecipação de fundo especifica a imagem que será consertada para toda a página ou pode rolar
• O tamanho de fundo é usado para definir o tamanho da imagem de fundo
• Origina de fundo determina a origem da imagem de fundo

Pedido de propriedade abreviado de fundo

Enquanto trabalhamos com a propriedade abreviada em segundo plano, precisamos definir as propriedades em uma ordem específica, como mostrado abaixo:

• Temos que escrever a cor de fundo primeiro
• Então o segundo valor é para a imagem de fundo
• O terceiro valor é especificado para a repetição de fundo
• O atendimento de fundo ocorre após a repetição de fundo
• Depois, o valor da posição de fundo é escrito

Podemos pular qualquer propriedade, dependendo do cenário, mas temos que escrever as outras propriedades em ordem adequada.

Exemplo
No exemplo anterior (posição de fundo), utilizamos três propriedades diferentes. Escrevemos cada propriedade separadamente, o que é um processo de tempo gasto. No entanto, essas propriedades podem ser agrupadas em uma propriedade, como mostrado abaixo:

Imagem de fundo

Bem -vindo ao Linuxhint.com

No código acima, escrevemos três propriedades: imagem de fundo, repetição de fundo e posição de fundo dentro da propriedade de fundo abreviado. Ele mostrará a seguinte saída:

Conclusão

A propriedade abreviada de fundo nos permite definir as múltiplas propriedades em segundo plano em uma única propriedade simultaneamente. As propriedades abreviadas de fundo seguem uma ordem específica para definir as múltiplas propriedades dentro da propriedade em segundo plano. Nesta redação, aprendemos o que é uma propriedade abreviada de fundo, quais propriedades podem ser usadas dentro do fundo propriedade. Posteriormente, este artigo determina uma ordem específica para as propriedades.