ワードプレスのCSSスプライト

Question

私はそれをホバーすると、異なる画像を表示するCSSスプライトを作成しました。

私のワードプレスのページでは、CSSのスプライトを使用していますが、私は内容の中にそれを取得することはできません。

画像はページのまわりにあります。

アイデア？これはこれは、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

ある[http://www.pixeltouch.no/?p=65][1]

私のページですあなたのhtmlを使用すると、半分のピクセルを使用invalid
第二には、彼らはあなたの代わりにでaに:hoverを置く
存在していないです
これを試してみてください。

#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; 
} 

テストし、それはあなたの方法であなたを助ける必要がありません。