css 圖片代替文字處理

圖片代替文字處理：
在有些時候網速可能不好加載不出來圖片，那麼就影響用戶的某一功能需求，那麼我們可以處理圖片用文字代替，網速好的時候加載css顯示圖片，不好的時候加載不了css就顯示
這個圖片對應的文字。

<a class="a1" href="www.baidu.com">百度</a>
<a class="a2" href="www.baidu.com">百度</a>

方式一： 使用文字縮進

.a1{
            width: 200px;
            height: 200px;
            display: inline-block;
            background-image:url("./images/lbj.jpg") ;
            background-size: 200px 200px;

            text-indent: 200px; /*文字縮進跟容器寬度 */
            white-space: nowrap;/* 不換行*/
            overflow: hidden; /* 超出隱藏*/

        }

方式二 使用padding 容器高度爲0 將背景圖片加在padding上

.a2{
            width: 200px;
            height: 0px;
            padding-top: 200px;
            display: inline-block;
            background-image:url("./images/lbj.jpg") ;
            background-size: 200px 200px;

            overflow: hidden; /* 超出隱藏*/
        }

真正樣式

用戶看到的樣式

加載不出來css時的樣式

結果：
這樣將上上面a標籤的csss去掉後 就代表網速不好加載不了css 顯示文字了
加上css後代表網速好 顯示圖片 看不到文字

淘寶用的就是講背景圖加在padding上 容器高度爲0