La propiedad de imagen de fondo le permite especificar una imagen que se mostrará en segundo plano. Se puede usar junto con el color de fondo, por lo que si la imagen no se repite, el color de fondo se llenará con el color de fondo si la imagen no se puede cubrir. El código es simple, solo recuerde que la ruta es relativa a la hoja de estilo, por lo que en el siguiente código, la imagen y la hoja de estilo están en el mismo directorio
Para las imágenes, primero pensamos en la imagen de fondo. Porque muchas de nuestras decoraciones se logran con imágenes de fondo. Como ese es el caso, comencemos con la imagen de fondo de control CSS.
Definición y usoLa propiedad de imagen de fondo establece la imagen de fondo para el elemento.
El fondo de un elemento toma todas las dimensiones del elemento, incluidos los márgenes internos y los bordes, pero no los márgenes externos.
Por defecto, la imagen de fondo se encuentra en la esquina superior izquierda del elemento y se repite horizontal y verticalmente.
1. Imagen de fondo de control CSS:Para una página web, cuando comenzamos a diseñar, es posible que no pensemos demasiado sobre cuál era la imagen de fondo, porque la mayoría de ellos solo necesitan diseñar colores de fondo. Creo que es muy simple, porque es lo mismo que la música de primer plano, y la velocidad de la apertura de la página web tendrá un cierto impacto. Sin embargo, para sitios web personales generales o blogs personales, por supuesto, es indispensable mostrar su propia personalidad. Por supuesto, nada no será demasiado perfecto. Hay cosas buenas y cosas malas. Es decir, cuando la imagen no está disponible, pero CSS está disponible, el contenido de reemplazo no se mostrará. Por lo tanto, no se recomienda utilizar imágenes de fondo CSS en el texto del botón de navegación o situaciones similares.
Hay muchos atributos CSS que controlan las imágenes de fondo, y la mayoría de ellos se utilizarán siempre que estén relacionados con la imagen.
(1) Importar imágenes de fondo:Por supuesto, con lo que todos están más familiarizados es el fondo y la imagen de fondo.
El código para diseñar imágenes de fondo para páginas web es:
cuerpo {fondo: url (d: /images/04.jpg)}
o
cuerpo {background-image: url (d: /images/04.jpg)}
De esta manera, podemos importar las imágenes que queremos usar como fondo en la página web.
(2) Cómo mostrar imágenes de fondo:Por supuesto, usar el código anterior solo no podrá expresar el efecto que desea. Porque si la imagen es pequeña, se balancea de manera plana. Si es grande, para mostrarlo, aparecerá una barra de desplazamiento, lo cual no es bueno. Por lo tanto, tenemos que usar repetición de fondo para el control de la pantalla.
Es el valor:
repetir: valor predeterminado. Imagen de fondo enjuicios en el retrato y la dirección horizontal
Sin repetición: la imagen de fondo no está azulada
repetir-x: la imagen de fondo se mide horizontalmente solo
Repetir y: la imagen de fondo está en mosaico solo en la dirección vertical
En cuanto al código, creo que cualquiera que conozca un pequeño CSS lo sabe, como sigue
:
Cuerpo {fondo: url (d: /images/04.jpg); background-repeat: no-repeat}
De esta manera, se muestra en el tamaño de la imagen original.
(3) Control del tamaño de la imagen de fondo:Pero la pregunta es, ¿qué pasa si la imagen es demasiado grande? Para una buena página web, es mejor no usar imágenes demasiado grandes. La razón también se ha mencionado anteriormente, que afecta la velocidad de abrir la página web. Será mejor que usemos PS o fuegos artificiales para manejarlo. Pero como lo mencioné, no tenemos miedo de usar CSS para controlar el tamaño de la imagen.
Creo que muchas personas usarán naturalmente el siguiente código:
Copiar el código