实现Extjs多图标背景按钮图标定位

最新推荐文章于 2021-09-06 16:24:23 发布

最新推荐文章于 2021-09-06 16:24:23 发布 · 219 阅读

文章标签：

#实现Extjs多图标背景按钮图标定位

javascript 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>多图标背景按钮图标定位</title>

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>

</body>

</html>