HTML&CSS基礎-圖片按鈕閃爍解決方案

時間 2020-04-29

標籤 html&css html css 基礎圖片按鈕閃爍解決方案欄目 CSS 简体版

原文原文鏈接

　　　　　　　　　　　　　HTML&CSS基礎-圖片按鈕閃爍解決方案css

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　做者：尹正傑html

一.圖片按鈕存在閃爍的案例緩存

1>.HTML源代碼url

<!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。因爲加載圖片須要必定的時間，因此在加載和顯示過程會有一段時間，背景圖片沒法顯示，致使出現 * 閃爍的狀況。當第二次再去觸發時我們又會發現就不會出現閃爍的狀況，那是由於瀏覽器使用了第一次下載圖片的緩存。 * */ .btn{
                 /*將a轉換爲塊元素*/ display: block;
                 /*設置寬高*/ width: 93px; height: 29px;
                /*設置背景圖片*/ background-image: url(img/btn/link.png);
                /*設置圖片不重複*/ background-repeat: no-repeat;
             } .btn:hover{
                 /*設置鼠標移入連接時的背景圖片*/ background-image: url(img/btn/hover.png);
             } .btn:active{
                 /*設置鼠標正在點擊連接時的背景圖片*/ background-image: url(img/btn/active.png);
             }
         </style>
    </head>
    <body>
        
        <!--建立一個超連接-->
        <a class="btn" href="#"></a>
    </body>
</html>

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

二.解決圖片按鈕閃爍方案-圖片整合技術(CSS-Sprite)code

1>.HTML源代碼htm

<!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/btn.png);
                /*設置圖片不重複*/ background-repeat: no-repeat;
             } .btn:hover{
                 /*設置鼠標移入連接時的背景圖片*/
                 /*background-image: url(img/btn/hover.png);*/ background-image: url(img/btn/btn.png);
                 /*當hover狀態時，但願圖片能夠向左移動*/ background-position: -93px 0px;
             } .btn:active{
                 /*設置鼠標正在點擊連接時的背景圖片*/
                 /*background-image: url(img/btn/active.png);*/ background-image: url(img/btn/btn.png);
                 /*當active狀態時，但願圖片能夠再一次向左移動*/ background-position: -186px 0px;
             }
         </style>
    </head>
    <body>
        
        <!--建立一個超連接-->
        <a class="btn" href="#"></a>
    </body>
</html>

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

相關標籤/搜索

每日一句

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