1. Concentre todas las imágenes de fondo dispersas involucradas en la página en una imagen grande y luego use la imagen grande para la página web. Cuando un usuario accede a una página, solo necesita enviar una solicitud al servidor una vez.
2. Utilice directamente atributos como la posición del fondo para ubicar con precisión la parte del fondo requerida.
Ejemplo
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<título>Título</título>
</cabeza>
<cuerpo>
<div>
<span></span>
<span></span>
<span></span>
</div>
</cuerpo>
<estilo>
.cuadro abarcar {
pantalla: bloque en línea;
}
.j {
fondo: url ("abcd.jpg") sin repetición -389px -141px;
ancho: 102px;
altura: 112 píxeles;
}
.w {
fondo: url ("abcd.jpg") sin repetición -117px -560px;
ancho: 135px;
altura: 112 píxeles;
}
.t {
fondo: url ("abcd.jpg") sin repetición -368px -417px;
ancho: 102px;
altura: 112 píxeles;
}
</estilo>
</html>Lo anterior es una introducción a la tecnología de sprites CSS. Espero que sea útil para todos.