Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de datos adjuntos de fondo
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Archivo adjunto de fondo Con sintaxis y ejemplos.
describir
La propiedad background-attachment de CSS define si la imagen de fondo de un elemento se fija dentro de la ventana gráfica o se desplaza con su bloque contenedor.
sintaxis
La sintaxis de la propiedad CSS background-attachment es:
background-attachment: value;
parámetro o parámetro
valor
Define si la imagen de fondo se desplaza. Puede ser uno de los siguientes:
valor | describir |
---|---|
Desplazarse | La imagen se desplazará junto con el bloque que contiene. div { imagen de fondo: url (“logo.png”); archivo adjunto de fondo: desplazamiento; } |
estable | La imagen se fija dentro de la ventana gráfica y no se desplaza con el bloque que la contiene. div {imagen de fondo: url (“logo.png”); archivo adjunto de fondo: fijo; } |
heredar | El elemento heredará el archivo adjunto de fondo de su elemento principal div {imagen de fondo: url (“logo.png”); archivo adjunto de fondo: heredar; } |
notas
- Al configurar la imagen de fondo, también debe configurar la propiedad CSS background-color en caso de que la imagen no esté disponible.
Compatibilidad del navegador
La propiedad CSS background-attachment tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- Firefox (Geco)
- Navegador de Internet (IE)
- ópera
- Safari (WebKit)
ejemplo
Discutiremos la propiedad de archivo adjunto de fondo a continuación, explorando ejemplos de cómo usarla en CSS.
usar desplazamiento
Veamos un ejemplo de un adjunto de fondo CSS usando valores de desplazamiento.
div { background-image: url("/images/gradient.png");
background-attachment: scroll; }
En este ejemplo de archivo adjunto de fondo CSS, usamos el archivo degradado.png como
También es aconsejable establecer el color de fondo al configurar la imagen de fondo, en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo negro.
div { background-color: black;
background-image: url("/images/gradient.png");
background-attachment: scroll; }
Ahora, si la imagen de degradado.png no está disponible,
uso fijo
Veamos un ejemplo de archivos adjuntos de fondo CSS que usan valores fijos.
div { background-image: url("/images/gradient.png");
background-attachment: fixed; }
En este ejemplo de archivo adjunto de fondo CSS, usamos el archivo degradado.png como
También es aconsejable establecer el color de fondo al configurar la imagen de fondo, en caso de que la imagen no esté disponible. Modifiquemos nuestro ejemplo para agregar un color de fondo azul.
div { background-color: blue;
background-image: url("/images/gradient.png");
background-attachment: fixed; }
Ahora, si la imagen de degradado.png no está disponible,