imagem de fundo:
Descrição
Propriedade da imagem de fundo(da "imagem de fundo" em inglês - "imagem de fundo") define a imagem de fundo de um elemento.
Observação
Ao definir uma imagem de fundo, você também deve especificar a cor de fundo que será usada se a imagem não estiver disponível. Quando uma imagem está disponível, ela é exibida sobre a cor de fundo. (Desta forma, a cor ficará visível nas partes transparentes da imagem).
Termos de uso
Começando com CSS3 (separado por vírgulas), você pode especificar várias imagens de fundo de uma vez. Isso tornará as imagens de fundo inferiores visíveis através das áreas transparentes das imagens de fundo superiores.
JavaScript
[objeto] .style .backgroundImage = "[valor]";
Suporte de navegador
Especificação
Os valores
Todos os valores CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
Nenhum Indica que não há imagem de fundo. url (
imagem de fundo: url (myImage.png);
Url ("
imagem de fundo: url ("myImage.png");
Herdar Indica que o elemento deve herdar os parâmetros do elemento pai.
Valor inicial:"Nenhum".
Exemplo de uso
Listagem de código
Imagem de fundo
Um documento com várias imagens de fundo.
O design do site começa com um plano de fundo.
Será correto prescrever a cor de fundo - propriedade cor de fundo, para rede de segurança, se a imagem não carregar. Em suportes url () especifique o caminho para a pasta com fotos.
Por padrão, a imagem se repetirá como um "bloco" até preencher toda a tela do navegador, conforme avançamos na página, nosso "bloco" preencherá a segunda tela e a terceira, desde que o conteúdo da página termine . É claro que tal resultado não é a altura de uma ideia de design, e não teremos um “banheiro”, mas apenas um blog, onde a legibilidade é um ponto muito importante.
Uma opção simples para se livrar do "tiling" é usar uma imagem grande, com pelo menos 1024 px de largura, de forma que ela ocupe toda a tela. Também será uma boa solução encontrar uma textura uniforme, quando multiplicada, a imagem ficará como um todo.
Como deixar o fundo mais atraente?
Graças a Deus temos ajudantes para isso:
- não repetir- desabilitar a repetição
- repetir-x- repetição do padrão apenas horizontalmente
- repeat-y- repetição do padrão apenas verticalmente
Por exemplo:
Cabeçalho do blog
Esta é uma textura de fundo que se repete apenas horizontalmente.
O próximo ajudante é a propriedade posição de fundo, permite posicionar a imagem de fundo em qualquer lugar da tela. Essa técnica é amplamente difundida no design moderno da web. Temos uma foto, mas ela não faz parte do conteúdo, mas serve apenas como decoração para o site.
Cabeçalho
Um exemplo de plano de fundo não repetitivo com um determinado posicionamento.
A imagem é exibida apenas uma vez e está localizada à direita.
O recuo da borda direita é definido para 200 px para evitar a sobreposição do texto com o fundo.
Se quisermos que a imagem esteja sempre visível ao rolar a tela para baixo, precisamos adicionar a propriedade ao código acima - anexo de fundo: fixo;
Qual é a diferença entre img e imagem de fundo?
A diferença é fundamental, tag img inserido diretamente no corpo Html-página e é responsável pelo conteúdo (ilustrações, fotografias, avatares), carrega uma carga semântica. É muito importante que a imagem seja indexada pelos motores de busca e entre nos resultados da pesquisa. Propriedades Imagem de fundo CSS- tornar o site único e bonito, ou seja, esse design, que deve ser retirado para um arquivo externo CSS estilos ou uso dentro de um elemento estilo.
Claro, isso não significa que imagem de fundo não funcionará se colocado no corpo Html-Páginas. Mas eu recomendo fortemente que tudo relacionado ao design seja retirado em CSS... Como resultado, teremos uma limpeza Html-código:
- isso terá um efeito positivo na indexação do site, os bots de pesquisa vão adorar o seu site e visitá-lo com mais frequência.
- seus visitantes também ficarão satisfeitos, o site carregará mais rápido devido ao seu baixo peso.
- você, como webmaster, acha mais fácil trabalhar com código limpo.
Bem, consideramos mais ou menos todas as opções de uso da propriedade Imagem de fundo CSS... Mais amigos de prática! Sinta-se à vontade para copiar o código e apresentar suas próprias opções!
informação curta
Versões CSS
Os valores
url O valor é o caminho para o arquivo gráfico, que é especificado na construção url (). Nesse caso, o caminho para o arquivo pode ser escrito entre aspas (duplas ou simples) ou sem elas. nenhum Cancela a imagem de fundo do elemento. herdar Herda o valor do pai.HTML5 CSS2.1 IE Cr Op Sa Fx
Modelo de Objeto
document.getElementById ("elementID") .style.backgroundImage
Navegadores
O Internet Explorer 7.0 ou posterior aplica um plano de fundo à parte interna da borda de um elemento que possui sua propriedade hasLayout definida. Se um elemento não tiver um hasLayout, a propriedade background-image respeitará as bordas do elemento conforme especificado na especificação. A diferença na exibição será perceptível se as bordas estiverem tracejadas ou pontilhadas em vez de sólidas.
Se o elemento for definido para rolar ou automático, o Internet Explorer 8 terá um atraso vertical de um pixel quando o plano de fundo rolar.
O Internet Explorer até a versão 7.0, inclusive, não oferece suporte ao valor herdado.
Se o fundo estiver definido para uma linha da tabela (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
O resultado deste exemplo no navegador Chrome é mostrado na Fig. 1. Os navegadores Internet Explorer, Opera e Firefox exibem o fundo da linha corretamente (Fig. 2).
Arroz. 1. Repetindo o plano de fundo para cada célula
Arroz. 2. Plano de fundo para toda a linha
informação curta
Versões CSS
Os valores
url O valor é o caminho para o arquivo gráfico, que é especificado na construção url (). Nesse caso, o caminho para o arquivo pode ser escrito entre aspas (duplas ou simples) ou sem elas. nenhum Cancela a imagem de fundo do elemento. herdar Herda o valor do pai.HTML5 CSS2.1 IE Cr Op Sa Fx
Modelo de Objeto
document.getElementById ("elementID") .style.backgroundImage
Navegadores
O Internet Explorer 7.0 ou posterior aplica um plano de fundo à parte interna da borda de um elemento que possui sua propriedade hasLayout definida. Se um elemento não tiver um hasLayout, a propriedade background-image respeitará as bordas do elemento conforme especificado na especificação. A diferença na exibição será perceptível se as bordas estiverem tracejadas ou pontilhadas em vez de sólidas.
Se o elemento for definido para rolar ou automático, o Internet Explorer 8 terá um atraso vertical de um pixel quando o plano de fundo rolar.
O Internet Explorer até a versão 7.0, inclusive, não oferece suporte ao valor herdado.
Se o fundo estiver definido para uma linha da tabela (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
O resultado deste exemplo no navegador Chrome é mostrado na Fig. 1. Os navegadores Internet Explorer, Opera e Firefox exibem o fundo da linha corretamente (Fig. 2).
Arroz. 1. Repetindo o plano de fundo para cada célula
Arroz. 2. Plano de fundo para toda a linha
Acho que não há um único local onde a propriedade não seja usada Fundo CSS... Ao que parece, o que poderia ser mais simples do que esta propriedade? Mas não, seus recursos são muito mais amplos do que o propósito usual de uma imagem ou cor como plano de fundo de uma página. Algo será familiar, mas certamente se tornará uma novidade para muitos. Em qualquer caso, será útil saber a fundo como funciona o background.
CSS3 trouxe muitas coisas novas para a propriedade, isso é transparência e atribuição de várias imagens como plano de fundo, mas falaremos sobre isso a seguir e, primeiro, veremos os fundamentos da propriedade. fundo.
cor de fundo
Tenho certeza de que você já fez atribuições de cores de fundo várias vezes. Isso pode ser feito usando vários tipos de notação: normal (o nome da cor é usado), hexadecimal ou RGB. Cada tipo é igual, use o que você mais gostar. Tento usar a versão mais curta, e para a percepção é mais simples e o arquivo de estilo é um pouco menor.
P (cor de fundo: vermelho;) p (cor de fundo: # f00;) p (cor de fundo: # ff0000;) p (cor de fundo: rgb (255, 0, 0;))
CSS3 tem suporte para transparência, então você também pode adicioná-lo à nossa cor, assim:
P (cor de fundo: rgba (255, 0, 0, 0,5);)
O último dígito foi definido como 50% de transparência. Você pode definir o valor da transparência de 0 (fundo totalmente transparente) a 1 (totalmente opaco).
imagem de fundo
Esta propriedade também é muito utilizada, pois permite atribuir uma imagem ao fundo. CSS3 adiciona a capacidade de atribuir várias imagens ao fundo, cada uma criando uma espécie de camada, de forma que cada uma das subseqüentes seja sobreposta à anterior. Por que isso pode ser útil? Tudo é muito simples - digamos que você precise apertar os botões em cada canto do site. Fornecer um layout mais ou menos fluido, usando uma imagem não é uma opção. Portanto, fazemos 4 "camadas", movemos cada imagem para o seu canto e pronto, o problema está resolvido
Corpo (imagem de fundo: url ("imagem1"), url ("imagem2"), url ("imagem3"))
Se precisar atribuir uma imagem ao fundo, deixamos apenas a primeira no código, acho que isso é compreensível.
Existem duas regras a serem observadas ao usar qualquer imagem como plano de fundo:
- defina uma cor de fundo contrastante caso o usuário não consiga exibir uma imagem por algum motivo. Pode desligar a exibição de imagens piegas, economiza tráfego.
- não use uma imagem de fundo para transmitir qualquer informação importante. Pelo motivo declarado acima, o usuário pode não vê-lo.
O suporte para várias imagens de fundo é amplo o suficiente. Todos os navegadores, até mesmo o IE8, oferecem suporte a essa propriedade.
