CSS background-image em uma imagem

Imagine uma imagem grande, que demora pra ser carregada.
E se colocar um loading na imagem?
É bem simples:

<img src="imagemPesada.jpg" alt="alt da imagem" id="imagemPrincipal"/>

E no css :

img#imagemPrincipal{
	background: url('loading.gif') no-repeatcenter center;
}

Um outro exemplo do que se pode fazer com isso, é colocar níveis de profundidade, veja o exemplo abaixo:

Esse não foi feito por mim, eu achei na internet mas infelizmente não sei quem fez para dar os créditos, se alguém souber, avise-me.

Leave a Reply

Your email address will not be published. Required fields are marked *