Question

我正在学习，但我遇到了问题。我用css中的background-image完成了一个页脚，制作了一个链接。使用的文字缩进：-9999px;摆脱页脚图像顶部的H1。有人告诉我在那里编写h1语义正确，所以搜索引擎仍然可以看到它。然后用文本缩进隐藏它。我想在页脚顶部放置四个社交媒体图标，这些图标可作为链接点击。我一直卡住了。

<footer id="footer">
   <section id="socialmedia">

       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/facebook.png" width="56" height="54" alt="Facebook icon" title="Go to Facebook."  />
       </a>

       <a href="http://www.facebook.com/brilliantben">
                <img src="../images/pinterest.png" width="54" height="54" alt="Pinterest icon" title="Go to Pinterest"  />
       </a>



       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/twitter.png" width="54" height="54" alt="Twitter icon" title="Go to Twitter."  />
       </a>

       <a href="http://www.facebook.com/BenoitBelgium">
                <img src="../images/behance.png" width="55" height="54" alt="Behance icon" title="Go to Behance."  />
       </a>

   </section>

        <h1><a href="#">Goodbye, feel free to follow</a></h1>
</footer>

这是我的CSS。

#footer {
    background-image: url(../images/footer.png);
    height:214px;
    width: 960px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
    border-style: solid;
    border-width: 1px;

}

#footer a {
    text-indent: -9999px;
    height:214px;
    width:100%;
    display:block;


}

This is the footer I am trying to make.

由于

Answer 1

text-indent使图像不可见。删除它。

#footer a {
    height:214px;
    width:100%;
    display:block;
}

Answer 2

您需要在css中创建图标链接 - 每个图标需要一个

.facebook a：link { 宽度：214px; 高度：在这里增加高度保证金权利：15px; 显示：块; background：透明网址（'../ images / facebook.png'）中心底部无重复; background-size：25px 25px;

}

将此div放在您想要它的页脚中。

为其他图标重复设置

Answer 3

Matewka是正确的，只需删除文本缩进。您只需要删除不希望在网站上显示的文本，但是您希望它可以在seo机器人中查看。

在页脚背景图象顶部的象

3 个答案:

}