Veamos las nuevas propiedades background-origin y background-clip, así como la modificación que ha sufrido la propiedad background para permitir múltiples imágenes de fondo en un mismo elemento.
background-origin
Podríamos decir que el atributo background-origin es una versión mejorada de background-position que nos permite definir el origen de coordenadas desde el cual posicionamos la imagen. Podemos darle tres valores:
- border-box. Toma como origen de coordenadas el borde del elemento.
La imagen se incrusta al comienzo del border - padding-box. Toma como origen de coordenadas el padding del elemento.
Esta vez se incrusta justo al final del borde, donde empieza el padding - content-box. Toma como origen de coordenadas el punto donde comienza el contenido del elemento.
La imagen comienza al acabar el padding, justo donde empieza el contenido
Aquí tenéis una demostración.
background-clip
En ocasiones tendremos bordes con transparencias bajo los cuales no queremos que se muestre el fondo, aunque la propiedad background-origin tenga el valor border-box. Para estos casos contamos con el atributo background-clip que "enmascara" nuestro fondo tomando como referencia el borde, el padding o el contenido. Lo valores pueden ser:
- border. Es el valor por defecto. La imagen no sufre cambios.
- padding. Empieza a enmascarar a partir del inicio padding, por lo que no se mostrará fondo bajo nuestro borde.
- content. Enmascara a partir del contenido, por lo que no se muestra fondo en el borde ni en el padding.
Este es un ejemplo de como actúa el atributo con el valor padding. Aunque el fondo se empieza a aplicar al comienzo del borde, sólo se mostrará dentro del área de padding y content.
Aquí tenéis la demo de la imagen.
Múltiples fondos en CSS3
Hasta ahora en CSS2 el uso de varios fondos era algo complejo que pasaba por superponer varias capas aplicando a cada una de ellas un fondo distinto. CSS3 permite asignar a un mismo elemento varios fondos mediante el atributo background-image por lo que este trabajo se facilita enormemente.
La sintaxis para asignar varios fondos es la siguiente:
Código :
background-image:url("imagen"), url("imagen");
Como podéis ver, simplemente añadimos una coma al valor dado para incluir uno nuevo.
Si tomásemos dos imágenes como las de arriba y aplicásemos background-image de la manera citada obtendríamos este resultado:
Código :
background-image:url("bg2.png"), url("bg1.png");
Como es habitual, os dejo un ejemplo.
En el próximo capítulo veremos efectos de CSS3.
Información adicional
® Cristalab 2011
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.