Fondos de CSS3
CSS3 contiene algunas nuevas propiedades de fondo, lo que permite un mayor control del elemento de fondo.
En este capítulo aprenderá cómo agregar varias imágenes de fondo de un elemento.
También podrá aprender acerca de las siguientes nuevas propiedades de CSS3:
-
background-size -
background-origin -
background-clip
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -moz- , o -o- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Múltiples CSS3 Fondos
CSS3 le permite añadir múltiples imágenes de fondo de un elemento, a través de la background-image propiedad.
Las diferentes imágenes de fondo se separan por comas, y las imágenes se apilan una encima de la otra, donde la primera imagen es más cercano al espectador.
El siguiente ejemplo tiene dos imágenes de fondo, la primera imagen es una flor (alineado a la parte inferior y derecha) y la segunda imagen es un fondo de papel (alineado a la esquina superior izquierda):
Ejemplo
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Inténtalo tú mismo " Imágenes de fondo se pueden especificar múltiples: con las propiedades individuales del fondo (como el anterior) o el background propiedad abreviada.
En el siguiente ejemplo se utiliza el background propiedad abreviada (mismo resultado que el ejemplo anterior):
Ejemplo
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Inténtalo tú mismo " Tamaño CSS3 Antecedentes
El CSS3 background-size de propiedad le permite especificar el tamaño de las imágenes de fondo.
Antes de CSS3, el tamaño de una imagen de fondo de era del tamaño real de la imagen. CSS3 nos permite reutilizar imágenes de fondo en diferentes contextos.
El tamaño se puede especificar en longitudes, porcentajes, o mediante el uso de una de las dos palabras clave: contienen o cubierta.
El ejemplo siguiente cambia el tamaño de una imagen de fondo mucho más pequeñas que la imagen original (utilizando píxeles):
Imagen original de fondo:
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.
imagen de fondo cambia de tamaño:
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.
Aquí está el código:
Ejemplo
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Inténtalo tú mismo " Los otros dos valores posibles para background-size son contain y cover .
La contain la palabra clave se adapta la imagen de fondo a ser tan grande como sea posible (pero tanto su anchura y su altura debe caber dentro del área de contenido). Como tal, dependiendo de las proporciones de la imagen de fondo y la zona de posicionamiento de fondo, puede haber algunas áreas del fondo que no están cubiertas por la imagen de fondo.
La cover de palabras clave se adapta la imagen de fondo para que el área de contenido está completamente cubierta por la imagen de fondo (tanto su anchura y altura son iguales o exceden el área de contenido). Como tal, algunas partes de la imagen de fondo no pueden ser visibles en el área de posicionamiento de fondo.
El siguiente ejemplo ilustra el uso de contain y cover :
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;
}
Inténtalo tú mismo " Definir Tamaños de fondo de varias imágenes
El background-size propiedad también acepta varios valores para el tamaño del fondo (usando una lista separada por comas), cuando se trabaja con múltiples orígenes.
El siguiente ejemplo se ha especificado tres imágenes de fondo, con diferente background-size valor para cada imagen:
Ejemplo
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Inténtalo tú mismo " Del mismo tamaño de imagen de fondo
Ahora queremos tener una imagen de fondo en una página web que cubre toda la ventana del navegador en todo momento.
Los requisitos son los siguientes:
- Llenar toda la página con la imagen (sin espacios en blanco)
- Reducir la imagen según sea necesario
- Centrar imagen en la página
- No causan barras de desplazamiento
El siguiente ejemplo muestra cómo hacerlo; Utilice el elemento html (el elemento html es siempre al menos la altura de la ventana del navegador). A continuación, establezca un fondo fijo y centrado en ella. A continuación, ajuste su tamaño con el background-size de propiedad:
Ejemplo
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Inténtalo tú mismo " CSS3 background-origin de la propiedad
El CSS3 background-origin propiedad especifica donde se coloca la imagen de fondo.
La propiedad toma tres valores diferentes:
- border-box - la imagen de fondo se inicia desde la esquina superior izquierda de la frontera
- padding-box - (predeterminado) la imagen de fondo se inicia desde la esquina superior izquierda del límite del relleno
- content-box - la imagen de fondo se inicia a partir de la esquina superior izquierda del contenido
El siguiente ejemplo ilustra el background-origin la propiedad:
Ejemplo
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Inténtalo tú mismo " CSS3 background-clip la propiedad
El CSS3 background-clip propiedad especifica el área de la pintura del fondo.
La propiedad toma tres valores diferentes:
- border-box - (predeterminado), el fondo está pintado para el borde exterior de la frontera
- padding-box - el fondo está pintado para el borde exterior del acolchado
- content-box - el fondo está pintado en el cuadro de contenido
El siguiente ejemplo ilustra el background-clip la propiedad:
Ejemplo
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 »
Propiedades CSS 3 Antecedentes
| Propiedad | Descripción |
|---|---|
| background | Una propiedad abreviada para establecer todas las propiedades de fondo en una declaración |
| background-clip | Especifica el área de la pintura del fondo |
| background-image | Especifica una o más imágenes de fondo para un elemento |
| background-origin | Especifica dónde está / están situadas la imagen (s) de fondo |
| background-size | Especifica el tamaño de la imagen de fondo (s) |