<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
? ? <title>多图标背景按钮图标定位</title>
? ? <style type="text/css">
body
{
?background-color:#eef;
}
?
/* Tools */
.x-tool {
border-style: none;
border-width: 0;
? ? width:15px;
? ? height:15px;
? ? cursor:pointer;
background: url('tool-sprites.gif');
}
? ? ? ??
.x-tool-close {?
? ? background-position:0 -0;
}
?
x-tool-close-over {
? ? background-position:-15px 0;
}
?
.x-tool-minimize {
? ? background-position:0 -15px;
}
?
.x-tool-minimize-over {
? ? background-position:-15px -15px;
}
?
.x-tool-maximize {
? ? background-position:0 -30px;
}
?
.x-tool-maximize-over {
? ? background-position:-15px -30px;
}
?
.x-tool-restore {
? ? background-position:0 -45px;
}
?
.x-tool-restore-over {
? ? background-position:-15px -45px;
}
?
.x-tool-gear {
? ? background-position:0 -90px;
}
?
.x-tool-gear-over {
? ? background-position:-15px -90px;
}
?
.x-tool-prev {
? ? background-position:0 -105px;
}
?
.x-tool-prev-over {
? ? background-position:-15px -105px;
}
?
.x-tool-next {
? ? background-position:0 -120px;
}
?
.x-tool-next-over {
? ? background-position:-15px -120px;
}
?
.x-tool-pin {
? ? background-position:0 -135px;
}
?
.x-tool-pin-over {
? ? background-position:-15px -135px;
}
?
.x-tool-unpin {
? ? background-position:0 -150px;
}
?
.x-tool-unpin-over {
? ? background-position:-15px -150px;
}
?
.x-tool-right {
? ? background-position:0 -165px;
}
?
.x-tool-right-over {
? ? background-position:-15px -165px;
}
?
.x-tool-left {
? ? background-position:0 -180px;
}
?
.x-tool-left-over {
? ? background-position:-15px -180px;
}
?
.x-tool-down {
? ? background-position:0 -195px;
}
?
.x-tool-down-over {
? ? background-position:-15px -195px;
}
?
.x-tool-up {
? ? background-position:0 -210px;
}
?
.x-tool-up-over {
? ? background-position:-15px -210px;
}
?
.x-tool-refresh {
? ? background-position:0 -225px;
}
?
.x-tool-refresh-over {
? ? background-position:-15px -225px;
}
?
.x-tool-plus {
? ? background-position:0 -240px;
}
?
.x-tool-plus-over {
? ? background-position:-15px -240px;
}
?
.x-tool-minus {
? ? background-position:0 -255px;
}
?
.x-tool-minus-over {
? ? background-position:-15px -255px;
}
?
.x-tool-search {
? ? background-position:0 -270px;
}
?
.x-tool-search-over {
? ? background-position:-15px -270px;
}
?
.x-tool-save {
? ? background-position:0 -285px;
}
?
.x-tool-save-over {
? ? background-position:-15px -285px;
}
?
.x-tool-help {
? ? background-position:0 -300px;
}
?
.x-tool-help-over {
? ? background-position:-15px -300px;
}
?
.x-tool-print {
? ? background-position:0 -315px;
}
?
.x-tool-print-over {
? ? background-position:-15px -315px;
}
?
.x-tool-expand {
? ? background-position:0 -330px;
}
?
.x-tool-expand-over {
? ? background-position:-15px -330px;
}
?
.x-tool-collapse {
? ? background-position:0 -345px;
}
?
.x-tool-collapse-over {
? ? background-position:-15px -345px;
}
?
? ? </style>
</head>
<body>
? ? <input id="Button1" class="x-tool x-tool-close" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-close-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-minimize" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-minimize-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-maximize" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-maximize-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-restore" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-restore-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-gear" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-gear-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-prev" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-prev-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-next" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-next-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-pin" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-pin-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-unpin" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-unpin-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-right" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-right-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-left" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-left-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-down" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-down-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-up" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-up-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-refresh" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-refresh-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-plus" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-plus-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-minus" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-minus-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-search" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-search-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-save" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-save-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-help" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-help-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-print" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-print-over" type="button" /><br>
?
? ? <input id="Button1" class="x-tool x-tool-expand" type="button" />
? ?
? ? <input id="Button2" class="x-tool x-tool-expand-over" type="button" /><br>
? ?
? ? <input id="Button3" class="x-tool x-tool-collapse" type="button" />
? ?
? ? <input id="Button4" class="x-tool x-tool-collapse-over" type="button" />
</body>
</html>