Question

我正在尝试在我的博客底部获取下一个/上一页的链接，以便只显示图像。我有定位和链接正确设置我想要使用的图像。问题是，链接仅适用于我从原始代码中使用的文本。我有想要使用的图像设置为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;
}

Answer 1

尝试：

<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中的背景

Answer 2

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

.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 个答案: