用于博客的下一个/上一个导航的图像答案

【问题标题】：Images for next/prev navigation for a blog用于博客的下一个/上一个导航的图像
【发布时间】：2012-11-29 23:42:57
【问题描述】：

我正在尝试在我的博客底部获取下一个/上一个链接，以便仅显示图像。我已经正确设置了定位和链接以及我想要使用的图像。问题在于链接仅适用于我从原始代码中使用的文本。我将要使用的图像设置为 div 的背景。我不知道如何使图像成为链接并删除文本。

博客链接：

http://www.conutant.org/test-box/

我的 PHP 里面有什么：

<div id="bottomnavigation">
    <?php if($single) { ?>
        <div class="nextprev">
            <span class="prev"><?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>

            <a href="http://www.conutant.org"><div id="homeicon"></div></a>

            <span class="next"><?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
        </div>
    <?php } ?>
</div>

还有 CSS

.nextprev {
    height: 100px;
}

.nextprev .prev {
    float: left;
    height: 100px;
    width:200px;
    background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: 19px;
}

.nextprev .next {
     float: right;
     height: 100px;
     width:186px;
     background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
     background-repeat: no-repeat;
     background-position: left top;
}

【问题讨论】：

标签： css wordpress navigation

【解决方案1】：

将背景图像应用于锚点，而不是跨度。

.prev a {
 float: left;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}

.next a {
 float: right;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}

您还需要将锚点设置为块元素：

.prev a,
.next a {
 display:block;
}

最后使用text-indent: -9999px 来隐藏文本。

【讨论】：

【解决方案2】：

尝试：

<div id="bottomnavigation">

<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<a href="http://www.conutant.org"><div id="homeicon"></div></a>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>


</div>

你的 CSS 不再需要背景

【讨论】：