html - css Sprite 不显示

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 a{...}，还是不行。 我使用“检查元素”检查了路径，它正在显示，所以我猜路径应该是正确的。

怎么了？？

Answer 1

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

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

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

参见 jsfiddle .

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

编辑:如果您想要从一个大图形中提取一个矩形区域，则位置必须为负数，因为您要将图形从其正常位置向上和向左滑动。否则，大图形最终会出现在它作为背景的元素之外的其他地方。
如果您要重复背景，则积极的立场会起作用。