HTML使用雪碧图做背景
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>雪碧图背景图片使用</title> <style> .box1{ height: 134px; width: 127px; background: url(img/spri.jpg); } .box2{ height: 134px; width: 127px; background: url(img/spri.jpg); /* 雪碧图: 在网页加载中图片属于外部资源,不同Html一起加载,所以浏览器会再次发送请求 才渲染图片。 如果我们使用一张图片就完成背景的话,就会避免在此发送请求时导致的影响(网络带宽慢,图片会闪烁一下才加载得出来) 使用雪碧图需要计算背景的大小,然后需要显示部分在雪碧图的位置,以此来设置背景图片的偏移量 用 background-position 来表示。 */ background-position: 0 134px; } </style> </head> <body> <div class="box1"></div> <br> <div class="box2"></div> <