Cuando estudiamos los estilos de otros sitios web, a menudo nos encontramos con una situación en la que la misma imagen se usa en muchos atributos de fondo para satisfacer el uso de varias partes de la página web. Si abre este tipo de imagen y echa un vistazo, encontrará que esta imagen contiene muchas imágenes pequeñas, como:
Otro ejemplo:
Estas imágenes pequeñas son las partes después de dividir la imagen completa. Cada parte se coloca en una imagen en lugar de almacenarse como imágenes separadas. Todos sabemos que el propósito es reducir la cantidad de solicitudes http y ahorrar tiempo y ancho de banda .
Entonces, ¿cómo darse cuenta de que solo una parte de una imagen se muestra en diferentes lugares? Esto utiliza el problema de posicionamiento de la imagen de fondo del que hablaremos hoy. Creo que muchas personas se han deprimido por este problema y mis amigos me preguntan a menudo, así que hoy lo explicaré sistemáticamente:
sabemos que cuando usamos una imagen como fondo, el CSS debe escribirse así . Tome el contenedor div como fondo . Por ejemplo, también puede ser cuerpo. El fondo de td, p, etc. es el mismo.
Código: div{ fondo: #FFF url (imagen) sin repetición fija xy;} |
Los valores del atributo de fondo aquí son:
#FFF color de fondo: (valor de color, el lugar donde no se cubre la imagen de fondo, o cuando hay no hay color de fondo de la imagen de fondo)
Imagen de fondo: (Aquí está la dirección de la imagen)
Si se repite sin repetición: (Cuando la imagen es más pequeña que el tamaño del contenedor, la imagen se organizará repetidamente para llenar el contenedor de forma predeterminada. Sin repetición significa que no hay repetición. Solo en este momento se mostrarán las coordenadas de posicionamiento posteriores útil.)
Si el fondo fijo se desplaza con el contenedor: (Hay dos valores opcionales, el desplazamiento se desplaza, el fijo no se desplaza, el valor predeterminado es desplazamiento)
Posicionamiento de la imagen de fondo xy: (tenga en cuenta que el posicionamiento solo tiene sentido sin repetición. Este es el enfoque de hoy)
Necesitamos aclarar algunos puntos en el posicionamiento de la imagen de fondo:
1. El primero de los dos valores es posicionamiento horizontal, lo llamamos posicionamiento en el eje x. El último valor es el posicionamiento longitudinal, al que llamamos posicionamiento del eje y. Si solo hay un valor, el valor predeterminado es la dirección del eje x. En este momento, la dirección del eje y se alinea de manera predeterminada hacia arriba y hacia abajo, que es el centro.
2. El origen del eje de coordenadas es el vértice izquierdo del contenedor correspondiente.
3. La flecha del eje y de esta coordenada apunta hacia abajo, es decir, los valores xy en la esquina inferior derecha (dentro del contenedor) son todos positivos.
4. Los valores xy representan respectivamente el valor del vértice izquierdo de la imagen de fondo en relación con el origen de las coordenadas (es decir, el vértice izquierdo del contenedor).
5. El valor de xy se puede expresar como porcentaje o px.
6. xy también se puede expresar mediante los cinco métodos de alineación de "izquierda, derecha, arriba, abajo, centro", pero tenga en cuenta: cuando se expresa como "izquierda, derecha, arriba, abajo, centro", se aplican las reglas de alineación, en lugar de que las reglas de coordenadas . Cuando x está a la izquierda, significa que el lado izquierdo de la imagen está alineado con el lado izquierdo del contenedor. Cuando está a la derecha, significa que el lado derecho de la imagen está alineado con el lado derecho del contenedor. , significa que la parte superior de la imagen está alineada con la parte superior del contenedor. Cuando está abajo, significa que la parte superior de la imagen está alineada con la parte inferior del contenedor. significa alineación centrada.
7. Cuando xy se expresa como porcentaje o px, su valor puede ser un número negativo. Podemos entender fácilmente el significado de los números negativos aplicando las reglas de coordenadas. Cuando x es un número negativo, significa que el vértice izquierdo de la imagen está a la izquierda del vértice izquierdo del contenedor. significa que el vértice izquierdo de la imagen está por encima del punto fijo izquierdo del contenedor. Es decir, hacia la izquierda y hacia arriba más allá del alcance del contenedor.
A continuación utilizo algunas ilustraciones para ilustrar varias situaciones . El bloque azul representa la imagen y el cuadro de puntos representa el contenedor (puede ser div, td o directamente el cuerpo). Tenga en cuenta que solo podemos ver la imagen de fondo dentro del contenedor. Yo uso blanco Indica la parte visible, y lo que está más allá del alcance del contenedor es invisible. Las coordenadas del punto fijo izquierdo del contenedor son (0, 0).
El primero, la imagen de fondo está alineada con la parte superior izquierda del contenido, 0px 0px también se puede escribir como parte superior izquierda
En la segunda imagen, la imagen de fondo está en el medio del contenedor y las coordenadas del punto fijo son valores positivos.
En la tercera imagen, la imagen de fondo está en el lado superior izquierdo del contenedor y las coordenadas del punto fijo son negativas
------------------------- --------- ----------------------------------------
En este punto, podemos entender cómo usar el valor de posicionamiento en el fondo para posicionar con precisión una imagen de fondo. Regresemos y echemos un vistazo a las dos imágenes presentadas al principio. Podemos usar: posicionamiento en segundo plano y solo visible dentro del contenedor. Propiedades para llamar a una determinada parte de la imagen completa a voluntad.
Pero para facilitar la llamada, debemos prestar atención a algunas reglas al organizar estas imágenes pequeñas, por ejemplo: la distancia entre imágenes pequeñas suele ser el tamaño del contenedor donde se llaman las imágenes pequeñas, o la distancia es mayor. para evitar que se muestren en el contenedor. ¡Muéstrenos imágenes que no queremos mostrar!
Además, si el posicionamiento utiliza porcentajes, el algoritmo es bastante especial. Déjame darte un ejemplo:
Código: fondo:#FFF url(imagen) sin repetición fija 50% -30% |
En este momento, ¿dónde debe estar la imagen en el contenedor? La fórmula del algoritmo es la siguiente: ¿
la posición de las coordenadas
?del vértice izquierdo de la imagen desde el vértice izquierdo del contenedor para
x: (ancho del contenedor - ancho de la imagen) x50%
y: (alto del contenedor - alto de la imagen) x (-30%)
El resultado obtenido aplica la regla de coordenadas. Si la diferencia es negativa y el porcentaje es positivo, el resultado de la operación es negativo. Si la diferencia es negativa y el porcentaje es negativo, el resultado es positivo. En definitiva, la operación aquí se ajusta al algoritmo. Al incorporar el resultado de la operación a la regla de coordenadas, puede obtener la posición de la imagen.
Por ejemplo: el contenedor tiene un ancho: 600 px; un alto: 600 px; y la imagen tiene un ancho: 200 px y un alto: 200 px;
Usando el estilo anterior, podemos obtener la posición de la imagen como:
x: (600px-200px)*50%
años: (600px-200px)*(-30%)
Como se muestra a continuación:
