使用背景圖，製作雪碧圖效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < ...
使用背景圖，製作雪碧圖效果：
<!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>index.html
原圖展示：
我們要從上面的圖片中摳取出太陽來當做背景圖片。
效果展示：
