CSSで画像置換のロールオーバー z-indexを使う方法

まずはデモ
http://css-eblog.com/eblog_sample/0912/dkir/

■Html
<p class="dkirBox para">
<a href="#" class="dkir"><span>HOME</span></a>

</p>

■CSS
.dkirBox {
 position: relative;
 z-index: 3;
 zoom: 1;
 }
 .dkir {
 background: url(button.png) left top no-repeat;
 display: block;
 text-decoration: none;
 width: 135px;
 height: 45px;
 }
 .dkir:hover {
 background-position: left bottom;
 }
 .dkir span {
 position: relative;
 z-index: -1;
 }

■画像

参考：これで決まり？な画像置換 - DKIR   
http://css-eblog.com/csstechnique/dkir.html