html - 左右切换不显示导航

Question

我正在尝试复制此网站上显示的左右切换: http://www.alexanderinteractive.com/company/josh

我想在我的站点上应用此导航，但无法显示图像。

这是我的代码:

       #toggle {
         position: absolute;
         right: 30px;
         top: 30px;
         width: 104px;
         z-index: 2;
       }
       #toggle a.prev {
         background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_left_150x150.png);
       }
       #toggle a.prev {
         margin-right: 20px;
       }
       #toggle a.next {
         background-image: url(http://www.onvia.com/sites/default/files/icon_arrow_right_150x150.png);
       }
       .clear:before,
       .clear:after {
         content: "\0020";
         display: block;
         height: 0;
         overflow: hidden;
       }

<div id="toggle" class="clear">
  <a href="http://www.apple.com" class="prev">Previous</a>
  <a href="http://www.microsoft.com" class="next">Next</a>
</div>

Answer 1

你需要做的就是添加

#toggle a {
text-indent: -9999px;
background-size: cover;
width: 35px;
height: 35px;
display: inline-block;
}

text-indent 删除文本；父元素是position: absolute;，所以需要为元素设置height和width，以及background- size: cover; 使背景图像与包含元素允许的一样大。 Here is the jsfiddle