使用背景图，制作雪碧图效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- reset.css文件内容参考：https://www.cnblogs.com/lanshanxiao/p/12663192.html --> <link rel="stylesheet" href="./reset.css"> <style> .img{ width:150px; height:150px; border:2px solid; background-image:url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=382503044,3585482793&fm=26&gp=0.jpg"); background-repeat: no-repeat; background-position:-160px -80px; } </style> </head> <body> <div class="img"> </div> </body> </html>
原图展示：
我们要从上面的图片中抠取出太阳来当做背景图片。
效果展示：
