在前端web的設計中,有時候為了seo需要做一些不合常理的規劃,所以在我們這里做SEO的小組經常和做前端的小組干仗的。今天就說一個SEO小組提出的HTML前端設計方案中的一個小需求,給大家參考一下。

需求介紹

国产视频app1、給A標簽加入背景圖片,并顯示背景圖片

国产视频app2、A標簽要正常的寫法,在源碼中不能改變其代碼的格式。

国产视频app3、在瀏覽器的展示中,要把A標簽的文字隱藏掉,只展示背景圖片,不展示文字

解決方案

上面的需求主要就是說出一點,隱藏掉A標簽的文字,并不是隱藏掉A標簽,所以我們可以用CSS來實現。

HTML代碼

<a href="http://feiniaomy.com" >飛鳥慕魚博客</a>

CSS代碼

a{
    background-image: url(https:xswdd.cn/zb_users/upload/Mochu_Feiniao/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
}

顯示效果:

HTML隱藏A標簽文字,隱藏A標簽標題,隱藏A標簽

国产视频app根據上面的顯示結果,可以看到A標簽的文字還是存在的,我們該如何把文字隱藏掉呢?

給A標簽的CSS屬性加入,'text-indent'

text-indent:屬性規定文本塊中首行文本的縮進。

CSS代碼

a{
    background-image: url(https:xswdd.cn/zb_users/upload/Mochu_Feiniao/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
    text-indent: -9999px;
}

顯示效果

HTML隱藏A標簽文字,隱藏A標簽標題,隱藏A標簽

這次示顯結果中,A標簽的文字已經消失掉了(其實是被縮進到了左邊)

完整的代碼示例:

以下代碼,你們復制到本地在瀏覽器中進行查看,也可以自己編輯看一下效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a{
        background-image: url(https:xswdd.cn/zb_users/upload/Mochu_Feiniao/logo.png);
        background-repeat: no-repeat;
        width: 240px;
        height: 70px;
        display: block;
        text-indent: -9999px;
    }
    </style>
</head>
<body>
    <a href="http://feiniaomy.com" >飛鳥慕魚博客</a>
</body>
</html>