CSS3 Fondo (Background)

usando CSS3puede aplicar varios fondos a los elementos.

usando CSS3Fondo

CSS3ofreció varias nuevas propiedades para manipular el fondo de los elementos, como recorte de fondo, múltiples fondos y opciones de ajuste del tamaño del fondo.

La próxima sección le presentará CSS3todas las nuevas funciones de fondo, para obtener información sobre otras propiedades relacionadas con el fondo, consulteFondo CSStutoriales.

CSS3 background-propiedad size

Este background-La propiedad size se puede usar para especificar el tamaño de la imagen de fondo. En CSS3Antes, el tamaño de la imagen de fondo estaba determinado por el tamaño real de la imagen. El tamaño de la imagen de fondo se puede especificar en píxeles o porcentajes, y se pueden usar los términos clave auto, contain y cover. No se permite el uso de valores negativos.

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
　　　　border:　6px sólido #333;
}

CSS3 background-propiedad clip

background-La propiedad clip se puede usar para especificar si el fondo del elemento se extiende hasta el borde. La propiedad fondo-La propiedad clip puede tomar tres valores: borde-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　fondo: naranja;
　　　　background-clip: contenido-box;
}

Por favor, consulteModelo de caja CSSTutoriales para obtener más información sobre la caja del elemento.

CSS3 background-propiedad origin

Este background-La propiedad origin se puede usar para especificar el área de ubicación de la imagen de fondo. Puede tomar los mismos valores que background-Atributo clip: border-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

CSS3múltiples fondos

CSS3permite que agregues múltiples fondos a un solo elemento. Los fondos se apilan uno sobre el otro. El número de capas sebackground-imageo backgroundEl número de valores separados por comas en la propiedad abreviada determina.

.box {
　　　　width:　100%;
　　　　height:　500px;
　　　　background: url("images/url("images-repeat center,/clouds.png) no-repeat center, lightblue;
}

La primera valor separado por comas de la lista de fondo (es decirbackground-imagebirds.pngbackground-color.