Question

我在网站的几个页面上使用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;
}

Answer 1

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

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

一些CSS精灵没有在Firefox，Chrome和IE上显示？

1 个答案: