html - wordpress 中的 CSS Sprite

Question

我创建了一个 css Sprite ，当我悬停它时会显示不同的图像。

我在我的 wordpress 页面中使用了 css Sprite ，但我似乎无法将其放入内容中。

图像遍布整个页面。

有什么想法吗？这是我的页面 [http://www.pixeltouch.no/?p=65][1]

这是html

<ul id="toprow">
        <li id="orginal"><a href="#"></a></li>
        <li id="png"><a href="#"></a></li>
        <li id="jpgx"><a href="#"></a></li>
    </ul>

    <ul id="secondrow">
        <li id="bpp2"><a href="#"></a></li>
    </ul>

    <ul id="thirdrow">
        <li id="bpp1"><a href="#"></a></li>
    </ul>

    <ul id="fourthrow">
        <li id="bpp05"><a href="#"></a></li>
    </ul>

    <ul id="fifthrow">
        <li id="bpp025"><a href="#"></a></li>
    </ul>

还有CSS

 #uppg1container{
margin:10px;
padding:0;
}

/*Första raden*/
#toprow {
position:absolute;
}

#toprow li{
list-style-type:none;
position:absolute;
}

#toprow li, #toprow a{
height:212px;
display:block;
}

#orginal{
background:url('lena.png') 0 0;
left:0;
width:212px;
}

#png{
background:url('lena.png') -212px  0;
left:220px;
width:212px;
}

#png a:hover{
background: url('lena.png') 0 0;
}

#jpgx{
background:url('lena.png') -424px 0;
left:440px;
width:212px;
}

#jpgx a:hover{
background: url('lena.png') 0  0;
}

/*Andra raden*/
#secondrow{
position:absolute;
}

#secondrow li{
top:220px;
left:440px;
list-style-type:none;
position:absolute;
}

#secondrow li, #secondrow a{
height:212px;
display:block;
}

#bpp2{
background:url('lena.png') -636px 0;
left:940px;
width:212px;
}

#bpp2 a:hover{
background: url('lena.png') 0  0;
}

/*Tredje raden*/
#thirdrow{
position:absolute;
}

#thirdrow li{
top:440px;
left:440px;
list-style-type:none;
position:absolute;
}

#thirdrow li, #thirdrow a{
height:212px;
display:block;
}

#bpp1{
background:url('lena.png') -848px 0;
left:940px;
width:212px;
}

#bpp1 a:hover{
background: url('lena.png') 0  0;
}

/*Fjärde raden*/
#fourthrow{
position:absolute;
}

#fourthrow li{
top:660px;
left:440px;
list-style-type:none;
position:absolute;
}

#fourthrow li, #fourthrow a{
height:212px;
display:block;
}

#bpp05{
background:url('lena.png') -1060px 0;
left:940px;
width:212px;
}

#bpp05 a:hover{
background: url('lena.png') 0  0;
}

/*Femte raden*/
#fifthrow{
position:absolute;
}

#fifthrow li{
position:absolute;
top:880px;
left:440px;
list-style-type:none;
}

#fifthrow li, #fifthrow a{
height:212px;
display:block;
}

#bpp025{
background:url('lena.png') -1272px 0;
left:940px;
width:212px;
}

#bpp025 a:hover{
background: url('lena.png') 0  0;
}

Answer 1

如前所述，您的 html 是 invalid
其次你使用半像素，它们不存在
你把 :hover在 a 上而不是在 #jpegx
试试这个:

#jpegx {
    background-image:url('http://www.pixeltouch.no/wp-content/uploads/2012/03/lena1.png');
    background-position: -328.8px 0; /*-328.8px is invalid use -328 or -329*/
}
#jpegx:hover {
    background-position: 0  0;
}

未经测试，但它应该对您有所帮助。