html - 页脚背景图像顶部的图标

Question

我正在学习，但遇到了问题。我用 css 中的背景图像完成了一个页脚，制作成一个链接。使用的文本缩进:-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;
}