1. Concentre todas as imagens de fundo espalhadas envolvidas na página em uma imagem grande e, em seguida, use a imagem grande para a página da web. Quando um usuário acessa uma página, ele só precisa enviar uma solicitação ao servidor uma vez.
2. Use diretamente atributos como posição de fundo para localizar com precisão a parte de fundo necessária.
Exemplo
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<título>Título</título>
</head>
<corpo>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
<estilo>
.box span {
display: bloco embutido;
}
.j {
plano de fundo: url("abcd.jpg") sem repetição -389px -141px;
largura: 102px;
altura: 112px;
}
.c {
plano de fundo: url("abcd.jpg") sem repetição -117px -560px;
largura: 135px;
altura: 112px;
}
.t {
plano de fundo: url("abcd.jpg") sem repetição -368px -417px;
largura: 102px;
altura: 112px;
}
</estilo>
</html>O texto acima é uma introdução à tecnologia CSS sprite. Espero que seja útil para todos.