Propriedades do fundo de folhas de estilo em cascata (css)
Com folhas de estilo em cascata (CSS), você pode aplicar propriedades de fundo para um número de diferentes objetos em uma página web, incluindo a página inteira, uma camada particular, uma mesa, uma célula da tabela, e até mesmo texto.
cor de fundo: A cor de fundo pode ser aplicado à maioria dos objetos em uma página, incluindo texto, tabelas, células de tabelas, camadas, eo corpo de uma página usando um valor hexadecimal. Ao especificar cor hexadecimal para qualquer estilo, lembre-se de adicionar o símbolo de número (#) Antes de o valor hexadecimal, tal como no # CC9900, para obter melhores resultados de exibição browser.
p {background-color: # 33ff00-}imagem de fundo: Você pode aplicar imagens, tais como uma cor de fundo, o fundo de muitos objetos diferentes em uma página da web, incluindo o corpo de uma página, tabelas, células de tabelas e camadas. Você pode controlar como as telhas de imagem (repete) usando o repetir atributo.
.mylayer {background-image: url (images / car.jpg) -}fundo de repetição: O repetir atributo informa o navegador como a imagem de fundo deve ser repetido na área que está enchendo. Por padrão, e salvo indicação em contrário, todos os fundos serão telha vertical e horizontalmente para preencher todo o espaço da marca ou objeto denominou o fundo.
body {background-image: url (images / zigzag.jpg) -background-repeat: repeat-x-}o repetir atributo tem quatro variáveis:
repetir: Esta opção é o mesmo que a configuração padrão para imagens de fundo e telhas a imagem de fundo horizontalmente e verticalmente.
repeat-x: Use esta opção quando você quiser a imagem de fundo a telha apenas ao longo do eixo horizontal. Se desejado, usá-lo em conjugação com a horizontal e / ou vertical -fundo posição atributo.
repetir-y: Use esta opção quando você quiser a imagem de fundo a telha apenas ao longo do eixo vertical. Se desejado, usá-lo em conjugação com a horizontal e / ou vertical -fundo posição atributo.
Video: Curso CSS ( Aula 04 ) -- A Propriedade BACKGROUND [Planos de Fundo para seus Documentos]-Parte-1
no-repeat: Essa definição exibe a imagem de fundo como uma única imagem estática sem repetir em qualquer direção.
background-attachment: Este atributo refere-se à forma como a imagem de fundo interage com o conteúdo acima dela. A imagem de fundo pode se comportar de três maneiras diferentes - rolagem, fixo, e herdar - mas não todos os três são consistentemente apoiado por todos os navegadores, então não se esqueça de testar qualquer opção selecionada em uma variedade de navegadores e versões de navegadores em plataformas Mac e PC.
body {background-image: url (images / biodiesel.jpg) -background-attachment:-background-repeat fixo: repetir-y}Aqui está uma explicação sobre os diferentes estilos de vinculação de fundo:
rolagem: Esta é a opção padrão para a forma como a imagem de fundo é anexado à página, que funciona da mesma se o atributo é especificado ou não especificado na CSS. Com esta opção, a imagem rola fundo, juntamente com qualquer texto e outros objetos na página.
fixo: O fixo atributo mantém a imagem de fundo fixo para a janela do navegador enquanto o texto e outros objetos na página rolar passado.
herdar: Quando você especificar esta opção, a imagem de fundo herda a regra de anexo, se rolagem ou fixo, a partir do seu recipiente pai, como com uma célula de tabela no interior de uma mesa.
-fundo posição (X): Definir a horizontal -fundo posição atributo para controlar onde na janela do browser a imagem de fundo exibe e repetições. Escolher esquerda, centro, ou certo ou escreva qualquer valor em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (percentagem).
p {background-image: url (images / recycle.jpg) -background-repeat: repeat-x-background-position: left;}-fundo posição (Y): Definir a vertical -fundo posição atributo para controlar onde na janela do browser a imagem de fundo exibe e repetições. Escolher topo, centro, ou inferior ou escreva qualquer valor em px (píxeis), pc (Picas), pt (pontos), dentro (polegadas), milímetros (milímetros), cm (centímetros), em (EMS), ex (Exs), ou % (percentagem).
p {background-image: url (images / gogreen.jpg) -background-repeat: repeat-y-background-position: centro-}Quando ambas as posições fundo horizontal e vertical precisa ser especificado no CSS, listá-los juntos separados por um espaço:
p {background-image: url (images / earthsafe.jpg) -background-repeat: repeat-x-background-position: centro-esquerda}A posição horizontal precede sempre a posição vertical quando os dois s combinados. Se essa ordem não for seguida, o elemento não pode processar corretamente, resultando em problemas de exibição inesperados quando visto em diferentes navegadores.