Google Website Translator Gadget

martes, 8 de abril de 2014

Múltiples imatges background amb CSS3

CSS3 logo
http://www.w3.org/Style/CSS/

Múltiples imatges background amb CSS3

Una de les coses on habitualment puc cometre errors es a la sentència background amb diverses imatges.
Posem un exemple amb el següent CCS (que pots veure funcionant aquí):

Codi comentat:

.divimage{
padding:40px;
background:

url(http://upload.wikimedia.org/wikipedia/commons/f/f3/Airplane_GA_Black.svg)
 left top repeat-x,
url(http://upload.wikimedia.org/wikipedia/commons/7/7a/1a2.png)
 center no-repeat,
url(https://cdn1.iconfinder.com/data/icons/windows8_icons/26/airplane_take_off.png)
 left bottom repeat-x;

font-family: 'Roboto', sans-serif;
background-color:#a4d3ff;
box-shadow: inset 5px 5px 20px 5px #CCCCCC;
border-radius: 10px 0px 10px 0px;
}

Cal notar que:

  • entre les diverses imatges hi ha una coma (,)
  • Només hi ha una sentència background
  • Es pot combinar amb altres instruccions CSS 
  • Es poden importar imatges de fonts URL

Enllaços relacionats:




No hay comentarios:

Publicar un comentario