CSS 多重背景

在本章中，您将学习如何将多个背景图像添加到一个元素。

您还将学到以下属性：

  • background-size
  • background-origin
  • background-clip

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

Ejemplo

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

Prueba personal

多重背景图像可以使用单独的背景属性（如上所述）或 background 属性简写来指定。

下面的例子使用 background 属性简写（结果与上例相同）：

Ejemplo

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Prueba personal

Tamaño de fondo de CSS

CSS background-size La propiedad permite especificar el tamaño de la imagen de fondo.

Se puede especificar el tamaño de la imagen de fondo mediante longitudes, porcentajes o mediante una de las dos palabras clave siguientes:contain o cover.

El siguiente ejemplo ajusta el tamaño de la imagen de fondo a mucho menor que la imagen original (en píxeles):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Este es el código:

Ejemplo

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Prueba personal

background-size Las dos otras posibles valores son contain y cover.

contain La palabra clave ajustará la imagen de fondo a la mayor dimensión posible (pero su anchura y altura deben ajustarse al área de contenido). Dependiendo de la proporción de la imagen de fondo y el área de posicionamiento de fondo, pueden existir algunas áreas de fondo no cubiertas por la imagen de fondo.

cover Las palabras clave escalarán la imagen de fondo para que el área de contenido sea completamente cubierta por la imagen de fondo (su anchura y altura son igual o mayor al área de contenido). En este caso, algunas partes de la imagen de fondo pueden no ser visibles en el área de posicionamiento de fondo.

A continuación, se muestra un ejemplo de contain y cover Uso:

Ejemplo

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Prueba personal

Definir el tamaño de múltiples imágenes de fondo

Al manejar múltiples fondos degradados:background-size La propiedad también puede aceptar múltiples valores de configuración de tamaño de fondo (lista separada por comas).

El siguiente ejemplo especifica tres imágenes de fondo, cada una con un valor diferente de background-size:

Ejemplo

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Prueba personal

Imagen de fondo de tamaño completo

Ahora, queremos que la imagen de fondo del sitio web cubra siempre toda la ventana del navegador.

Los requisitos específicos son los siguientes:

  • Llena toda la página con la imagen (sin espacios en blanco)
  • Ajusta el tamaño de la imagen según sea necesario
  • Centra la imagen en la página
  • No desencadena la barra de desplazamiento

A continuación, se muestra cómo hacerlo: utiliza el elemento <html> (el elemento <html> es siempre al menos la altura de la ventana del navegador). Luego configura un fondo fijo y centrado en él. Finalmente, ajusta el tamaño con la propiedad background-size:

Ejemplo

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Prueba personal

Hero Image

También puedes usar diferentes atributos de fondo en <div> para crear una Hero Image (imagen grande con texto) y colocarla en la posición que desees.

Ejemplo

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Prueba personal

Propiedad background-origin CSS

CSS background-origin El atributo especifica la posición de la imagen de fondo.

Esta propiedad acepta tres valores diferentes:

  • border-box - La imagen de fondo comienza en la esquina superior izquierda del borde
  • padding-box - La imagen de fondo comienza en la esquina superior izquierda del relleno (por defecto)
  • content-box - La imagen de fondo comienza en la esquina superior izquierda del contenido

A continuación, se muestra un ejemplo de background-origin Atributos:

Ejemplo

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Prueba personal

Propiedad background-clip CSS

CSS background-clip El atributo especifica la región de dibujo del fondo.

Esta propiedad acepta tres valores diferentes:

  • border-box - Dibujar el fondo hasta el borde exterior (por defecto)
  • padding-box - Dibujar el fondo hasta el borde exterior del relleno
  • content-box - Dibujar el fondo en la caja de contenido

A continuación, se muestra un ejemplo de background-clip Atributos:

Ejemplo

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Prueba personal

Atributos avanzados de fondo CSS

Atributo Descripción
background Atributo abreviado utilizado para establecer todas las propiedades de fondo en una declaración.
background-clip Especificar el área de dibujo del fondo.
background-image Asignar una o más imágenes de fondo a un elemento.
background-origin Especificar la posición de colocación de la imagen de fondo.
background-size Especificar el tamaño de la imagen de fondo.