CSS: propiedad de datos adjuntos de fondo

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

La etiqueta tiene un conjunto de imágenes de fondo. Luego configuramos la imagen para que se desplace. La imagen de degradado.png ahora se desplazará con su bloque contenedor.

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,

Se seguirá mostrando el color de fondo negro.

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

La etiqueta tiene un conjunto de imágenes de fondo. Luego configuramos la imagen como fija. La imagen de degradado.png ahora permanecerá fija en la ventana gráfica y no se desplazará con su bloque contenedor.

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,

Se seguirá mostrando el color de fondo negro.