Durante el proceso de desarrollo front-end, a menudo se agregan imágenes de fondo a las páginas HTML por el bien de la belleza de la página. Entonces, ¿cómo usar CSS para configurar una imagen como fondo en HTML? Este artículo le presentará cómo configurar una imagen de fondo en CSS. Los amigos que la necesiten pueden consultarla y aprenderla. Espero que les resulte útil.
1. Descripción general de los antecedentes
CSS puede agregar colores de fondo e imágenes de fondo, así como configuraciones de imagen.
El atributo de fondo CSS es una propiedad que establece específicamente el fondo. Puede establecer el color de fondo o la imagen de fondo.
2. Atributos
1. color de fondo
(1) Definición y uso: el atributo de color de fondo establece el color de fondo del elemento
(2) Rango de fondo del elemento
La propiedad color de fondo establece un color sólido para el elemento. Este color rellena el contenido, el relleno y las áreas de borde del elemento, extendiéndose hasta los límites exteriores del borde del elemento (pero no los márgenes). Si el borde tiene partes transparentes (como un borde punteado), el color de fondo se mostrará a través de estas partes transparentes.
(3) valor transparente
Aunque en la mayoría de los casos no es necesario utilizar transparente. Sin embargo, si no desea que un elemento tenga un color de fondo y no desea que la configuración de color del navegador del usuario afecte su diseño, aún es necesario establecer el valor transparente.
Utilice color de fondo para establecer el color de fondo de un elemento:
<!DOCTYPEhtml><html><head><title>Fondo CSS</title><style>#bg{color:white;background-color:blue;margin:20px;/*Establece el margen exterior en 20px*/padding : 20 px;/*Establece el relleno en 20px*/border:10pxdottedblue;/*Establece un borde punteado amarillo de 10px de ancho*/}</style></head><body><pid=bg>atributo de color de fondo</p </cuerpo></html>Los resultados de la visualización son los siguientes:
De los resultados de la ejecución, podemos ver que el atributo de color de fondo puede establecer un fondo de color sólido para el elemento. Este color llenará el contenido, el relleno y el área del borde del elemento (también puede entenderse como el borde y). todas las áreas dentro de él). Para el elemento Las áreas fuera del borde (márgenes) no tienen ningún efecto.
2. imagen de fondo establece la imagen de fondo
imagen de fondo:url(imgs/main_bg.jpg),
Si la propiedad está configurada en el archivo css y la imagen no está en la carpeta css, agregue la ruta delante para regresar a la carpeta anterior.../
(1) El atributo de imagen de fondo establece la imagen de fondo del elemento.
(2) El fondo de un elemento ocupa todo el tamaño del elemento, incluidos el relleno y los bordes, pero no los márgenes.
(3) De forma predeterminada, la imagen de fondo se encuentra en la esquina superior izquierda del elemento y se repite horizontal y verticalmente.
(4) url('URL'): ruta que apunta a la imagen.
Consejo: establezca un color de fondo disponible para que la página se vea bien si no hay una imagen de fondo disponible.
3. repetición de fondo, repetición de imagen de fondo
De forma predeterminada, la imagen de fondo cubrirá toda la página. Si la imagen de fondo no es lo suficientemente grande para cubrir toda la página, la imagen de fondo se repetirá en abscisas y ordenadas;
4. tamaño de fondo establece el tamaño de la imagen de fondo
5. posición de fondo establece la posición de la imagen de fondo
Valores predeterminados: izquierda, abajo, derecha, arriba, centro (centro)
Nota: También puede utilizar valores numéricos o porcentajes como posición de fondo: 10px 10px representa la distancia de las coordenadas horizontales y verticales desde los bordes izquierdo y superior;
6. ¿La conexión en segundo plano está configurada como fija?
7.origen-fondo
origen-fondo es una nueva propiedad en CSS3. Cuando se utiliza el atributo de posición de fondo para establecer la posición de la imagen de fondo, la posición de la esquina superior izquierda del elemento se calcula de forma predeterminada. También puede utilizar el atributo de origen de fondo para establecer la posición relativa del atributo de posición de fondo para posicionar la imagen de fondo. Los valores opcionales del atributo de origen de fondo son los siguientes:
8. clip de fondo
background-clip es un nuevo atributo en CSS3, a través del cual se puede configurar el área de visualización de la imagen de fondo. Los valores opcionales para el atributo background-clip son los siguientes:
Nota: La translucidez del fondo significa que el fondo del cuadro es translúcido y el contenido dentro del cuadro no se ve afectado.
9. antecedentes
fondo es la abreviatura de atributo de fondo. A través de él, no solo puede establecer un determinado atributo de fondo para un elemento, sino también establecer varios o todos los atributos de fondo al mismo tiempo. No existe un orden fijo al configurar múltiples propiedades de fondo, pero se recomienda utilizar el siguiente orden:
color-de-fondo||imagen-de-fondo||posición-de-fondo[/tamaño-de-fondo]?||repetición-de-fondo||adjunto-de-fondo||origen-de-fondo||clip-de-fondo
Nota: La diferencia entre imagen de fondo y atributo img:
(1) El elemento img pertenece al concepto de HTML y la imagen de fondo pertenece al concepto de css.
(2) Cuando la imagen pertenece a contenido web, se debe utilizar el elemento img
(3) Cuando la imagen solo se usa para embellecer la página, se debe usar la imagen de fondo.