Extraído do trabalho de outras pessoas ~~~ Coisas muito boas Gramática:
posição de fundo: comprimento ||
posição de fundo: posição ||
valor da posição:
length : Porcentagem | Um valor de comprimento que consiste em um número de ponto flutuante e um identificador de unidade.
posição: superior centro | inferior esquerdo | centro direito
Descrição:
Define ou recupera a posição da imagem de fundo do objeto. O atributo background-image deve ser especificado primeiro. O posicionamento desta propriedade não é afetado pela configuração de preenchimento do objeto.
O valor padrão é: 0% 0%. Neste momento, a imagem de fundo será posicionada no canto superior esquerdo da área de conteúdo do objeto, excluindo o preenchimento.
Se apenas um valor for especificado, esse valor será usado para a abcissa. A ordenada será padronizada como 50%. Se dois valores forem especificados, o segundo valor será usado para a ordenada.
Se o valor da configuração for centro-direita, porque à direita, pois o valor da abcissa substituirá o valor central, a imagem de fundo será posicionada à direita.
A propriedade de script correspondente é backgroundPosition.
background-position – define o
valor da posição da imagem de fundo:
[ <porcentagem> | <comprimento> | esquerda | centro direita ] [ <porcentagem> |
* nível
esquerda: esquerda
centro: médio
certo: certo
* verticais
superior: ligado
centro: médio
inferior: próximo
* Combinação de vertical e horizontal
x-% y-%
x-pos y-pos
valor inicial: 0% 0%
Herança: Não
Aplica-se a: todos os elementos
background: background.position: position. ***************************** Pontos-chave a serem explicados: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<cabeça>
<title>Problema de posicionamento na posição de fundo</title>
<style type="texto/css">
<!--
*{
margem:0;
preenchimento:0;
}
corpo {
alinhamento de texto:centro;
plano de fundo:#000;
}
#contêiner{
largura:1000px;
margem:0 automático;
background:#fff url(images/bg.jpg) sem repetição no canto superior esquerdo;
altura:500px;
}
-->
</estilo>
</head>
<corpo>
<div id="container"> </div>
</body>
</html>1.background-position:left top; (veja a Figura 1). O canto superior esquerdo da imagem de fundo é alinhado com o canto superior esquerdo do contêiner (contêiner) e o excesso fica oculto. Equivalente a background-position:0,0; também equivalente a background-position:0%,0%;2.background-position:right bottom; O canto inferior direito da imagem de fundo é alinhado com o canto inferior direito do contêiner e o excesso fica oculto. Equivalente à posição de fundo: 100%, 100% também equivalente à posição de fundo: a largura do contêiner (contêiner) - a largura da imagem de fundo, a altura do contêiner (contêiner) - a altura da imagem de fundo 3. posição de fundo: 500px 15px; (veja a Figura 3). A imagem de fundo é movida 500px para a direita e 15px para baixo do canto superior esquerdo do contêiner, e o excesso fica oculto. 4.posição de fundo:-500px -15px (veja a Figura 4). A imagem de fundo é movida 500px para a esquerda e 15px para cima do canto superior esquerdo do contêiner, e o excesso fica oculto. 5.posição de fundo:50% 50% (ver Figura 5). Equivalente à esquerda: {largura do container - largura da imagem de fundo}*porcentagem à esquerda, o excesso fica oculto. Equivalente à direita: {altura do container (container) - altura da imagem de fundo}*porcentagem à direita, o excesso fica oculto. Por exemplo: posição de fundo:50% 50%; ou seja, posição de fundo: (1000-2000)*50%px, (500-30)*50%px; ; ou seja, a imagem de fundo Mova 500px para a esquerda do canto superior esquerdo do contêiner e 235px para baixo 6. (Neste caso, a imagem de fundo deve ser bg2.jpg para ver o efeito. A altura de bg.jpg; é muito pequeno e o efeito não é óbvio) background-position :-50% -50% (veja a Figura 6). Equivalente à esquerda: -{{largura do contêiner (contêiner) - largura da imagem de fundo}*porcentagem esquerda (todas as porcentagens são valores positivos)}, e a parte em excesso fica oculta. Equivalente à direita: -{{altura do contêiner (contêiner) - altura da imagem de fundo}*porcentagem direita (todas as porcentagens são valores positivos)}, e a parte em excesso fica oculta. Por exemplo: posição de fundo:-50% -50%; é posição de fundo:-{(1000-500)*50%}px,-{(500-360)*50%}px é posição de fundo: - 250px,-70px ou seja, a imagem de fundo se move 250px para a esquerda do canto superior esquerdo do container e 70px para cima;