Cómo modificar el código de fondo de la página web
1. Fondo monocromático de la página web - ARRIBA
Si el fondo de la página web es de un color puro, solo necesita configurar el color de fondo del cuerpo
body{fondo: #FFF}
Establezca el fondo de la página web en blanco
2. Imágenes de fondo normales: ARRIBA
1. de arriba a abajo con el mismo fondo
Captura de pantalla del efecto de fondo degradado de pantalla completa de arriba a abajo
Este tipo de fondo de página web solo necesita recortar una imagen con un ancho de 1 píxel y una altura adecuada como material de fondo, como se muestra a continuación:
Recorte una tira vertical de material de imagen como material de fondo
body{fondo: #FFF url( bg.gif) repetir-x 0}
Establezca esta imagen como imagen de fondo de esta manera. La parte superior de la página web está en mosaico horizontal con un fondo blanco. Aquí, preste atención a configurar la ruta de la imagen importada. según la ruta de su imagen.
2. Imágenes de fondo de mosaico horizontal
Por ejemplo, la versión 2014 de la página web DIVCSS5 tiene el mismo principio que el mosaico degradado. También recorta una franja vertical y la usa como. el fondo del cuerpo para colocarlo en mosaico horizontalmente. De esta manera, se llenará el fondo de la página web en pantalla completa.
Css para recortar una captura de pantalla con efecto de barra vertical.
El código es el mismo que el primero, pero la imagen es diferente. Configure la imagen de fondo para que se coloque en mosaico horizontalmente en el cuerpo.
3. Fondo de imagen grande irregular - ARRIBA
A menudo vemos algunas páginas web temáticas o de imágenes, el fondo es una imagen muy grande como fondo y, por lo general, pantalla ancha y pantalla estrecha. El monitor puede mostrar una imagen de fondo a pantalla completa, al igual que la imagen puede adaptarse al ancho y tamaño. De hecho, esta implementación es muy simple: haga que el ancho y el diseño artístico de esta imagen sean lo suficientemente grandes. Por ejemplo, el ancho de la pantalla de visualización más amplia del mercado es de 2560 píxeles. esta página web, puede llenar toda la pantalla. Luego, la imagen de fondo debe tener un ancho mayor o igual a 2560 px. De esta manera, la página web puede llenar la pantalla completa cuando se abre en monitores de pantalla ancha o estrecha. La imagen de fondo se puede abrir en pantalla completa al minimizar, maximizar o cambiar la ventana del navegador. La imagen centrada parece que la imagen de fondo cambia de tamaño de forma adaptativa.
Clave: La clave para una imagen de fondo adaptable a pantalla completa es hacer que la imagen sea lo suficientemente ancha como para que pueda llenar la pantalla con la resolución más amplia, e incluso resoluciones más pequeñas la llenarán naturalmente. Al mismo tiempo, debe configurar la imagen de fondo como esta como fondo del cuerpo y debe estar centrada.
Supongamos que esta imagen de fondo es: bg.jpg
Establezca el código CSS:
cuerpo{fondo: url(bg.jpg) centro sin repetición 0 }
Explicación del código: establezca esta imagen como fondo de la página web, generalmente sin mosaicos (sin repetición), centrada horizontalmente y mostrada en la parte superior
4. Imagen de fondo del encabezado e imagen de fondo inferior La altura del contenido se puede aumentar o disminuir mientras el fondo de la cabeza y la parte inferior permanecen sin cambios - ARRIBA
Aquí DIVCSS5 presenta dos técnicas comunes para configurar el diseño de diferentes imágenes de fondo para la cabeza y abajo.
1. Imágenes de la cabeza y de derechos de autor
Este método establece directamente la imagen de fondo de la cabeza en el fondo del cuerpo para que se muestre en el centro y en la parte superior, y el DIV del área de derechos de autor inferior establece el ancho. a 100; establezca este fondo al mismo tiempo Imagen o color de fondo.
cuerpo{fondo: url(bg.jpg) centro sin repetición 0} #footer{margen: 0 auto; ancho: 100; fondo: url(ft-bg.jpg) centro sin repetición 0 }
De esta forma, el fondo de la cabecera y del fondo puede ser diferente sin verse afectado por la altura del contenido.
2. La imagen de fondo superior y la imagen de fondo inferior fija de la página web.
La imagen de fondo inferior supera con creces la altura del cuadro inferior de derechos de autor.
Las imágenes de fondo superior e inferior de la página web son diferentes, y el área de contenido abarca las capturas de pantalla del efecto de fondo superior e inferior.
Dicha estructura tiene imágenes diferentes en la parte superior e inferior. y no afecta el diseño del fondo a medida que aumenta el contenido en el medio; generalmente esto se puede lograr configurando el fondo para la etiqueta html y el cuerpo.
Si la imagen de fondo azul oscuro superior es "top.jpg" y la imagen de fondo azul claro inferior es "foot.jpg"
DIV CSS establece el código CSS clave para la web fondo de la página:
html{fondo: url(top.jpg) centro sin repetición 0} cuerpo{fondo: url(foot.jpg) centro sin repetición abajo}