背景固定/按鈕練習
阿新 • • 發佈：2019-01-01
背景固定
當背景圖片的background-attachment設定為fixed時，
背景圖片的定位永遠相對於瀏覽器的視窗
按鈕練習
做完功能以後，發現在第一次切換圖片時，會發現圖片有一個非常快的閃爍，這個閃爍會造成一次不佳的使用者體驗 產生問題的原因： 背景圖片是以外部資源的形式載入進網頁的，瀏覽器每載入一個外部資源就需要單獨的傳送一次請求 但是我們的外部資源並不是同時載入，瀏覽器會在資源被使用時才去載入資源 我們這個練習，一上來瀏覽器只會載入link.png 由於hover和active的狀態沒有馬上觸發，所以hover.png和active.png並不是立即載入的 當hover被觸發時，瀏覽器才去載入hover.png 當active被觸發時，瀏覽器才去載入active.png 由於載入圖片需要一定的時間，所以在載入和顯示過程會有一段時間，背景圖片無法顯示，導致出現閃爍的情況 為了解決該問題，可以將三個圖片整合為一張圖片，這樣可以同時將三張圖片一起載入，就不會出現閃爍的問題了 然後再通過background-position來切換要顯示的圖片的位置，這種技術叫做圖片整合技術（CSS-Sprite） 優點： 1 將多個圖片整合為一張圖片裡，瀏覽器只需要傳送一次請求，可以同時載入多個圖片，提高訪問效率，提高了使用者體驗。 2 將多個圖片整合為一張圖片，減小了圖片的總大小，提高請求的速度，增加了使用者體驗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按鈕練習</title> <style type="text/css"> .btn:link{ /*將a轉換為塊元素*/ display: block; /*設定寬高*/ width: 93px; height: 29px; /*設定背景圖片*/ background-image: url(img/btn/btn2.png); /*設定背景圖片不重複*/ background-repeat: no-repeat; } .btn:hover{ /*當是hover狀態時，希望圖片可以向左移動*/ background-position: -93px 0px; } .btn:active{ /*當是active狀態時，希望圖片再向左移動*/ background-position: -186px 0px; } </style> </head> <body> <!-- 建立一個超連結 --> <a href="#" class="btn"></a> </body> </html>