Extraído del trabajo de otras personas~~~ Muy buen material Gramática:
posición de fondo: longitud ||
posición de fondo: posición ||
valor de posición:
longitud: Porcentaje | Un valor de longitud que consta de un número de punto flotante y un identificador de unidad.
posición: arriba | centro | abajo izquierda | centro derecha
Descripción:
Establece o recupera la posición de la imagen de fondo del objeto. Primero se debe especificar el atributo de imagen de fondo. El posicionamiento de esta propiedad no se ve afectado por la configuración de relleno del objeto.
El valor predeterminado es: 0% 0%. En este momento, la imagen de fondo se colocará en la esquina superior izquierda del área de contenido del objeto excluyendo el relleno.
Si solo se especifica un valor, ese valor se utilizará para la abscisa. La ordenada será por defecto del 50%. Si se especifican dos valores, se utilizará el segundo valor para la ordenada.
Si el valor de configuración es el centro derecho, porque el valor de abscisa derecho sobrescribirá el valor central, la imagen de fondo se colocará a la derecha.
La propiedad del script correspondiente es backgroundPosition.
posición de fondo: define el
valor de posición de la imagen de fondo:
[ <porcentaje> | <longitud> | izquierda | centro derecha ] [ <porcentaje> | arriba |
* nivel
izquierda: izquierda
centro: medio
derecha: derecha
* vertical
arriba: encendido
centro: medio
abajo: siguiente
* Combinación de vertical y horizontal.
x-% y-%
de pos-x y-pos
: 0% 0%
Herencia: No
Se aplica a: todos los elementos
fondo: fondo.posición: posición ******************************* Puntos clave para explicar: <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transicional//ES" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml " lang="UTF-8">
<cabeza>
<title>Problema de posicionamiento de la posición del fondo</title>
<tipo de estilo="texto/css">
<!--
*{
margen:0;
relleno: 0;
}
cuerpo {
alineación de texto:centro;
fondo:#000;
}
#contenedor{
ancho: 1000px;
margen:0 automático;
fondo:#fff url(images/bg.jpg) parte superior izquierda sin repetición;
altura: 500 px;
}
-->
</estilo>
</cabeza>
<cuerpo>
<div id="contenedor"> </div>
</cuerpo>
</html>1.background-position:left top; (ver Figura 1) La esquina superior izquierda de la imagen de fondo está alineada con la esquina superior izquierda del contenedor y la parte sobrante está oculta. Equivalente a posición de fondo:0,0; también equivalente a posición de fondo:0%,0%;2.posición de fondo:parte inferior derecha (consulte la Figura 2). La esquina inferior derecha de la imagen de fondo está alineada con la esquina inferior derecha del contenedor y la parte sobrante está oculta. Equivalente a posición de fondo: 100%, 100% también equivalente a posición de fondo: el ancho del contenedor (contenedor) - el ancho de la imagen de fondo, la altura del contenedor (contenedor) - la altura de la imagen de fondo; 3. posición de fondo: 500px 15px; (Ver Figura 3). La imagen de fondo se mueve 500 px hacia la derecha y 15 px hacia abajo desde la esquina superior izquierda del contenedor, y la parte sobrante se oculta. 4.posición de fondo: -500px -15px (ver Figura 4). La imagen de fondo se mueve 500 px hacia la izquierda y 15 px hacia arriba desde la esquina superior izquierda del contenedor, y la parte sobrante se oculta. 5.posición de fondo: 50% 50% (ver Figura 5). Equivalente a izquierda: {ancho del contenedor - ancho de la imagen de fondo}*porcentaje izquierdo, la parte sobrante está oculta. Equivalente a la derecha: {altura del contenedor (contenedor) - altura de la imagen de fondo}*porcentaje derecho, la parte sobrante está oculta. Por ejemplo: posición de fondo: 50% 50%; es decir, posición de fondo: (1000-2000)*50%px, (500-30)*50%px; es decir, posición de fondo:-500px, 235px; ; es decir, la imagen de fondo se mueve 500 px hacia la izquierda desde la esquina superior izquierda del contenedor y 235 px hacia abajo 6. (En este caso, la imagen de fondo debe ser bg2.jpg para ver el efecto. La altura de bg.jpg; es demasiado pequeño y el efecto no es obvio) posición de fondo: -50% -50% (ver Figura 6). Equivalente a izquierda: -{{ancho del contenedor (contenedor) - ancho de la imagen de fondo}*porcentaje izquierdo (todos los porcentajes son valores positivos)}, y la parte sobrante está oculta. Equivalente a la derecha: -{{altura del contenedor (contenedor) - altura de la imagen de fondo}*porcentaje derecho (todos los porcentajes son valores positivos)}, y la parte sobrante está oculta. Por ejemplo: posición-fondo:-50% -50%; es posición-fondo:-{(1000-500)*50%}px,-{(500-360)*50%}px; - 250px, -70px; es decir, la imagen de fondo se mueve 250px hacia la izquierda desde la esquina superior izquierda del contenedor y 70px hacia arriba;