Question

.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 {...}，仍然无法正常工作。我使用'Inspect Element'检查了路径，它正在显示，所以我猜路径应该是正确的。

有什么不对？

Answer 1

跨度上的

width和height将不起作用，因为span是内联元素。除非PHP使用某些内容填充跨度，否则它将没有大小，您将看不到任何内容。

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

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

请参阅jsfiddle。

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

编辑：如果您想要一个大图形中的单个矩形区域，则位置必须为负，因为您将图形从正常位置向上和向左滑动。否则，大图形会在其背后的某个位置结束。
如果你要重复背景，积极的立场就会奏效。

Answer 2

可能被后面的其他css !important覆盖的背景位置;

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

js fiddle

css精灵没有显示

2 个答案: