Question

我正在努力让CSS精灵出现在我的HTML页面中，但我无法做到。然后我把代码放在plunker上以共享代码到SO，它工作了！然后我明白它在Firefox上不起作用，但适用于Chrome。

请帮帮我

源代码：

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.outdoor {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
}
.parking{
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;
}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <img class="outdoor" /><img class="parking" />

</body>

</html>

链接到：background-position is removed on page load

注意：我正在删除测试网址。代码存在于此处，因此不会降低问题的清晰度。

Answer 1

您正在使用img标记background-image。老实说，我不知道浏览器支持是什么，但这不是一个好主意。而是使用div。您还需要将样式强制为内联块。或者，您可以使用类似字体真棒/ glyphicon的::before样式策略，通常与跨度一起使用。

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.outdoor {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
    display:inline-block;
}
.parking{
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;
    display:inline-block;
}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <div class="outdoor" ></div>
    <div class="parking" ></div>

</body>

</html>

Answer 2

您还可以使用代码而不是<div>代码。因为div是一个块级元素。

使用标记进行图片精灵的最佳做法。以下是图标的帖子 Should I use tag for icons instead of ?

＆＃13;

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
  .bg_icon{
        background-image: url(sprites.png);
        background-repeat: no-repeat;
        display:inline-block;
  }
.outdoor {
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
}
.parking{
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;

}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <i class="bg_icon outdoor" ></i>
    <i class="bg_icon parking" ></i>

</body>

</html>

＆＃13;

CSS精灵没有出现在Firefox中，但在Chrome

2 个答案: