0

ブログの下部にある次/前のリンクを取得して、画像だけを表示しようとしています。使用したい画像を使用して、配置とリンクを正しく設定しました。問題は、元のコードから使用したテキストに対してのみリンクが機能していることです。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;
}
4

2 に答える 2

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 の背景はもう必要ありません

于 2012-12-12T09:49:12.260 に答える
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、テキストを非表示にするために使用します。

于 2012-12-12T09:49:16.997 に答える