Enlace original: Fondos en CSS: todo lo que necesitas saber
Enlace de traducción: guía básica de CSS
Conserve los derechos de autor y los enlaces al reimprimir.
Los antecedentes son una parte importante de CSS y uno de los conocimientos básicos de CSS que necesita saber. Este artículo cubrirá el uso básico de fondo css (fondo), incluidos atributos como adjunto de fondo, etc., y también presentará algunas técnicas comunes sobre fondo (fondo), así como el fondo (fondo) en css3 (incluidos 4 nueva la propiedad de fondo).
Fondo en css2
Descripción general
Hay 5 propiedades de fondo principales en CSS2, que son:
color de fondo: especifica el color para rellenar el fondo.
imagen de fondo: Imagen de referencia como fondo.
posición de fondo: especifica la posición de la imagen de fondo del elemento.
repetición de fondo: determina si se repite la imagen de fondo.
adjunto de fondo: determina si la imagen de fondo se desplaza con la página.
Todas estas propiedades se pueden combinar en una propiedad abreviada: fondo. Un punto importante a tener en cuenta es que el fondo ocupa toda el área de contenido del elemento, incluido el relleno y el borde, pero no incluye el margen del elemento. Funciona bien en Firefox, Safari, Opera e IE8, pero en IE6 e IE7, el fondo no incluye el borde.
Propiedades básicas
color de fondo
La propiedad color de fondo rellena el fondo con un color sólido. Hay muchas formas de especificar este color y todos los métodos siguientes dan el mismo resultado.
color de fondo: azul;
color de fondo: rgb(0, 0, 255);
color de fondo: #0000ff;
El color de fondo también se puede establecer en transparente, lo que hace visibles los elementos que se encuentran debajo.
imagen de fondo
El atributo background-image permite especificar una imagen que se mostrará en segundo plano. Se puede utilizar junto con el color de fondo, por lo que si la imagen no se repite, las áreas no cubiertas por la imagen se rellenarán con el color de fondo. El código es muy simple, solo recuerda que la ruta es relativa a la hoja de estilos, por lo que en el siguiente código, la imagen y la hoja de estilos están en el mismo directorio.
imagen de fondo: url(imagen.jpg);
Pero si la imagen está en un subdirectorio llamado imágenes, debería ser:
imagen de fondo: url(imágenes/imagen.jpg);
Tangbantomatoes: use ../ para indicar el directorio de nivel superior, como background-image: url(../images/image.jpg), lo que indica que la imagen está ubicada en el subdirectorio de imágenes en el directorio de nivel superior del; hoja de estilo. Es un poco complicado, pero todo el mundo ya debería saberlo, así que no daré más detalles. Todos los derechos reservados por Front End Observation. Conserve el enlace al reimprimir.