HTML&CSS基礎-雪碧圖的製做和使用

時間 2020-04-29

標籤 html&css html css 基礎雪碧製做使用欄目 CSS 简体版

原文原文鏈接

　　　　　　　　　　　　　HTML&CSS基礎-雪碧圖的製做和使用css

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　做者：尹正傑html

一.使用PS將3張圖片合併爲一張(舒適提示:整合圖片適合整理背景圖，若是是img引用的圖片並不使用)瀏覽器

1>.將準備的圖依次拖入到PS中緩存

2>.拉一根輔助線，並點擊"圖像"--->"畫布大小"會彈出當前logo所佔的畫布大小信息url

3>.計算出寬度，修改畫布大小並選擇定位spa

4>.以下圖所示，確認寬度和定位後，點擊肯定code

5>.測量矩形的大小並拖拽參考線，便於後面講其它兩張圖片拖拽過來存放htm

6>.將hover.png和active.png的按鈕拖入到link.png途中我們預先給它們量準備的位置blog

7>.雪碧圖拖拽完成，接下來就是得把我們製做的成功保存下來了

8>.以下圖所示，點擊"文件" ---> "存儲爲web所用格式",選擇圖片的存儲格式爲「PNG-24」並點擊"存儲"按鈕

9>.將圖標存儲到本地

10>.圖片保存成功

二.使用我們本身製做的雪碧圖製做按鈕背景

1>.將圖片拷貝到項目路徑

2>.HTML源代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圖片按鈕</title>
         <style type="text/css">
             /** * 作完功能之後，發如今第一次切換圖片時，會發現圖片有一個很是快的閃爍，這個閃爍會形成一次不佳的體驗。 * * 產生閃爍的緣由: * 背景圖片是之外部資源的形式加載進網頁的，瀏覽器每加載一個外部資源就須要單獨發一次http請求,可是咱們 * 外部資源並非同時加載，瀏覽器惰性的，它默認會在資源被使用時纔去加載資源。也就是說，在我們這個案例中，一 * 上來只會加載link.png這個背景圖片，因爲僞類hover和active的狀態沒有立刻觸發，因此hover.png和 * active.png並非當即加載的，而是當hover被觸發時瀏覽器纔會去加載hover.png，當active被觸發時纔回去 * 加載active.png。因爲加載圖片須要必定的時間，因此在加載和顯示過程會有一段時間，背景圖片沒法顯示，致使出現 * 閃爍的狀況。當第二次再去觸發時我們又會發現就不會出現閃爍的狀況，那是由於瀏覽器使用了第一次下載圖片的緩存。 * * 解決方案: * 爲了解決上述d問題，能夠將三個圖片整合爲一張圖片，這樣能夠同時將三張圖片一塊兒加載，就不會出現閃爍的問題了， * 而後經過background-position屬性來切換顯示圖片的位置，這種技術叫作圖片整合技術(CSS-Sprite),這種技術有 * 如下優勢: * 1>.將多個圖片整合爲一張圖片裏，瀏覽器只須要發送一次http請求能夠同時加載多個圖片(提升了訪問效率,也提升了用戶體驗) * 2>.將多個圖片整合爲一張圖片，減少了圖片的總大小，提升請求的速度，增長的用戶體驗 * * 舒適提示: * 圖片中會保存一個叫顏色表屬性，若是下載三個圖片就會保存三個圖片的顏色表，下載一個圖片只須要保存一個顏色表從而節省了必定的存儲空間 * * */ .btn{
                 /*將a轉換爲塊元素*/ display: block;
                 /*設置寬高*/ width: 93px; height: 29px;
                /*設置背景圖片*/
                /*background-image: url(img/btn/link.png);*/ background-image: url(img/btn/my_btn.png);
                /*設置圖片不重複*/ background-repeat: no-repeat;
             } .btn:hover{
                 /*設置鼠標移入連接時的背景圖片*/
                 /*background-image: url(img/btn/hover.png);*/ background-image: url(img/btn/my_btn.png);
                 /*當hover狀態時，但願圖片能夠向左移動*/ background-position: -93px 0px;
             } .btn:active{
                 /*設置鼠標正在點擊連接時的背景圖片*/
                 /*background-image: url(img/btn/active.png);*/ background-image: url(img/btn/my_btn.png);
                 /*當active狀態時，但願圖片能夠再一次向左移動*/ background-position: -186px 0px;
             }
         </style>
    </head>
    <body>
        
        <!--建立一個超連接-->
        <a class="btn" href="#"></a>
    </body>
</html>

3>. 瀏覽器打開以上代碼渲染結果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。