某些 CSS sprite 在 Firefox、Chrome 和 IE 上不显示？答案

【问题标题】：Some CSS sprites not showing on Firefox, Chrome and IE?某些 CSS sprite 在 Firefox、Chrome 和 IE 上不显示？
【发布时间】：2015-09-28 18:58:01
【问题描述】：

我在网站的几个页面上使用 css-sprites 作为导航按钮，当悬停在图像上时，部分图像变暗。所有这些按钮上都有文字。在我刚刚将文本写入图像并且一切正常之前，但我想将文本添加到我的 html 中，以便它为放大到页面的任何人呈现更好的效果。然而，这样做现在导致精灵的图像不会出现在 Firefox、Chrome 和 IE 中（在 Safari 中仍然可以正常工作）。

显然，我认为将文本添加到代码中导致了这种情况，但现在即使我删除了文本，图像仍然不显示。我真的很难弄清楚为什么会这样，特别是因为我还有另外 2 个使用精灵的页面并且它们仍然可以正常工作。唯一的区别是我没有尝试将文本移动到这些页面上的代码中。

非常感谢任何建议

破碎精灵的代码：

.row5
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1215px;
}

.box1
{
background: url(http://www.sungblue.com/Images/box1sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}

.boxtext
{
font-family: elron;
color: rgba(255,255,255,1.00);
font-size: 18px;
width: 306px;
height: 18px;
position: absolute;
top: 175px;
left: 0px;
text-align: center;
}

.box1:hover
{
background-position: 0 -201px;
}

.box2
{
background: url(http://www.sungblue.com/Images/box2sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}

.box2:hover
{
background-position: 0 -201px;
}

.box3
{
background: url(http://www.sungblue.com/Images/box3sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}

.box3:hover
{
background-position: 0 -201px;
}

.row6
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1425px;
}

.box4
{
background: url(http://www.sungblue.com/Images/box4sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}

.box4:hover
{
background-position: 0 -201px;
}

.box5
{
background: url(http://www.sungblue.com/Images/box5sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}

.box5:hover
{
background-position: 0 -201px;
}

.box6
{
background: url(http://www.sungblue.com/Images/box6sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}

.box6:hover
{
background-position: 0 -201px;
}

<div class='row5'>
    <a href='http://www.sungblue.com/weddings.html'>
        <div class='box1'>
            <div class='boxtext'>WEDDINGS</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/prewedding.html'>
        <div class='box2'>
            <div class='boxtext'>ENGAGEMENT SHOOTS</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/contact.html'>
        <div class='box3'>
            <div class='boxtext'>CONTACT</div>
        </div>
    </a>
</div>
<div class='row6'>
    <a href='http://sungbluephotography.zenfolio.com'>
        <div class='box4'>
            <div class='boxtext'>CLIENT AREA</div>
        </div>
    </a>
    <a href='http://www.sungblue.com/prices.html'>
        <div class='box5'>
            <div class='boxtext'>PRICING</div>
        </div>
    </a>
    <a href='http://sungbluephotography.zenfolio.com/blog/'>
        <div class='box6'>
            <div class='boxtext'>BLOG</div>
        </div>
    </a>
</div>

这是我的精灵正在工作的其他页面的代码：

.row3
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 335px;
text-align: center;
}

.box1
{
background-image: url(http://www.sungblue.com/Images/weddingbox1sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}

.boxtext
{
width: 465px;
height: 18px;
position: absolute;
left: 0px;
top: 260px;
font-family: elron;
font-size: 18px;
color: rgba(255,255,255,1.00);
text-align: center;
}

.box1:hover
{
background-position: 0 -289px;
}

.box2
{
background-image: url(http://www.sungblue.com/Images/weddingbox2sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}

.box2:hover
{
background-position: 0 -289px;
}

.row4
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 633px;
text-align: center;
}

.box3
{
background-image: url(http://www.sungblue.com/Images/weddingbox3sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}

.box3:hover
{
background-position: 0 -289px;
}

.box4
{
background-image: url(http://www.sungblue.com/Images/weddingbox4sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}

.box4:hover
{
background-position: 0 -289px;
}

【问题讨论】：

尝试用引号将网址括起来！
在您的新示例中，您正在定义背景，并将图像作为第一个属性。在您的旧示例中，您正在定义特定的背景图像，我认为这会有所作为。
@Mr Lister 啊，是的，我也从图像中得到错误。应该先检查一下！谢谢，很沮丧，忘了自己检查图像。
@Spyro 没有区别，但感谢您的回复。
@DRGA 如果我在第一页将 css 更改为 background-image，它不再适用于任何浏览器，但显然这是由于我的图像错误。感谢您的回复。

标签： css google-chrome internet-explorer firefox css-sprites

【解决方案1】：

问题在于图像本身。由于它们具有 .jpg 扩展名，因此浏览器会尝试将它们视为 JPEG 文件，但事实并非如此。它们是 PNG 文件。

解决方案：将它们重命名为 .png，或将它们转换为实际的 JPEG 文件。

【讨论】：