Comentario: Sin embargo, después de que apareció CSS3, se mejoró la situación de visualización repetida. La propiedad del tamaño de fondo puede hacer que nuestra esperanza previa de estirar y llenar la imagen de fondo se haga realidad. El método de uso específico es el siguiente. Los amigos interesados pueden referirse a él. Espero que sea útil para todos.
Cómo hacer que la imagen de fondo estire el relleno, esta pregunta suena simple. Pero lamento decirte. No es tan simple como pensamos.Por ejemplo, establezca un fondo en un contenedor (cuerpo, div, span). El valor de longitud y ancho de este fondo no se puede modificar antes de CSS2.1.
Entonces, el resultado real es que solo se puede mostrar repetidamente, por lo que aparecen las propiedades como repetir, repetir x, repetir y, sin repetición. Se utiliza para controlar la visualización de imágenes de fondo. Por lo tanto, hay dos tipos de imágenes de fondo:
1. Es una imagen grande completa, el tamaño y el tamaño del área solo coinciden
2. Un gráfico de barras muy pequeño, después de pasar por la repetición, forma un fondo de imagen grande muy regular.
Sin embargo, después de que apareció CSS3, esta situación mejoró. La propiedad del tamaño de fondo puede hacer realidad nuestras esperanzas anteriores.
Y esta propiedad se puede usar en Firefox, Chrome e IE9.
El método de uso específico es el siguiente:
Tamaño de imagen de fondo (representación numérica):
#tamaño de fondo {
tamaño de fondo: 200px 100px;
}
Tamaño de imagen de fondo (representación porcentual):
#Background-Size2 {
tamaño de fondo: 30% 60%;
}
Tamaño de imagen de fondo (equivalente a extender la imagen para llenar el elemento, es decir, el valor de la portada):
#Background-Size3 {
tamaño de fondo: cubierta;
}
Tamaño de imagen de fondo (reduzca la imagen en una relación igual para adaptarse al tamaño del elemento, es decir, contiene valor):
#Background-Size4 {
tamaño de fondo: contener;
}
Tamaño de imagen de fondo (llena elementos con el tamaño de la imagen en sí, es decir, valor automático):
#Background-Size5 {
tamaño de fondo: auto;
}