0 
.comments 
{
    clear: both;
    background: url(./img/icons.png) 105px -230px no-repeat;
    width: 50px;
    height: 50px;
}

<div class="index-tools">
    <span class="comments"><?php comments_popup_link( __( '0', 'html5blank' ), __( '1', 'html5blank' ), __( '%', 'html5blank' )); ?></span>
    <span><?php edit_post_link(); ?></span>
</div>

图像不显示，我不知道为什么。我尝试了 .comments a{...}，但仍然无法正常工作。我使用“检查元素”检查了路径，它出现了，所以我猜路径应该是正确的。

怎么了？？

4

2 回答 2

2

width并且height在跨度上不起作用，因为跨度是内联元素。除非 PHP 用一些内容填充 span，否则它不会有大小，你也不会看到任何东西。

所以我建议你把它变成一个内联块。

.comments 
{
    clear: both;
    background: url(http://i43.tinypic.com/10psj2s.png) -105px -230px no-repeat;
    width: 50px;
    height: 50px;
    display:inline-block;
}

见jsfiddle。

我在那里模拟了 PHP 的一些输出，因此文本显示在背景图像上，但我想您需要对其进行微调。

编辑：如果您想要一个大图形中的单个矩形区域，则位置必须为负，因为您将图形从其正常位置向上和向左滑动。否则，大图形最终会出现在作为背景的元素之外的其他位置。
如果你要重复背景，正面的位置会起作用。

于 2013-07-07T06:27:05.530 回答
0

可能是背景位置被其他 css 覆盖，!important如下所示；

.comments 
{
    clear: both;
    background: url(http://oi43.tinypic.com/10psj2s.jpg) 105px -230px !important;
    width: 50px;
    height: 50px;
    display: block;
}

js小提琴

于 2013-07-07T06:37:59.927 回答