一、背景圖片練習 解釋：這個例子需要註意的是，我們背景圖片嵌套到另一個圖片之中。我們設計的註意點在於，怎麼定位到我們想定位到的地方。 總結：背景圖片就是一塊一塊的，我們想把塊的位置定位好（一般就是寬和高的相等），然後再對圖片在“塊”中進行位置調整就可以了 二、精靈圖 1.什麼是CSS精靈圖 CSS精 ...
一、背景圖片練習
解釋：這個例子需要註意的是，我們背景圖片嵌套到另一個圖片之中。我們設計的註意點在於，怎麼定位到我們想定位到的地方。
總結：背景圖片就是一塊一塊的，我們想把塊的位置定位好（一般就是寬和高的相等），然後再對圖片在“塊”中進行位置調整就可以了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>d101_background_image_exercise</title> <style> .box1{ width: 1600px; height: 900px; background-image: url("image/scratch_fish.jpg"); background-position: center center; } .box2{ width: 1600px; height: 500px; background-image: url("image/buyudaren.jpg"); background-position: center center; background-repeat: no-repeat; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
二、精靈圖
1.什麼是CSS精靈圖
CSS精靈圖是一種圖像合成技術
2.CSS精靈圖的作用
可以減少請求的次數，以及降低伺服器的壓力
3.如何使用CSS精靈圖
CSS精靈圖需要配合背景圖片精確定位
要使用到dreamware正在安裝，下次更新再進行演示
三、源碼：
d101_background_image_exercise.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d101_background_image_exercise.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悅君兮君不知-睿）
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，後臺回覆“禮包”獲取Java大數據學習視頻禮包
