7

这里的小问题，我有一个精灵图像，其中包含具有正常和悬停效果的图标..

这是我现在拥有的CSS..

.wi{
    background-image:url(images/icons/small/wi.png);
    background-repeat:no-repeat;
    display:block;
    overflow:hidden;
    height:24px;
    width:24px;
}

.wi-delete{background-position:0 0;}
.wi-edit{background-position:-24px 0;}
.wi-fullscreen{background-position:-48px 0;}
.wi-imageedit{background-position:-72px 0;}
.wi-download{background-position:-96px 0;}
.wi-tags{background-position:-130px 0;}
.wi-windowed{background-position:-154px 0;}

如您所见，图标的正常状态始终为背景位置Y = 0，因此悬停图像都在Y = -24px

我的图标 html 是：

<div id="something" class="wi wi-delete"></div>

问题是：可以只更改 Y 位置，因此我可以为所有图标悬停状态分配一条 CSS 行，而不是为每个图标设置一条 CSS 行？

就像是：

.wi:hover{
background-position: auto -24px;
}

反而

.wi-delete:hover{background-position:0 -24px;}
.wi-edit:hover{background-position:-24px -24px;}
..and so on..
4

1 回答 1

6

我感受到了你的痛苦！

它不适用于所有浏览器。

建议拆分background-position到background-position-x并background-position-y能够轻松更改仅一个轴。遗憾的是，W3C 人员认为将其添加到标准中还不够有用。您可以在此处阅读有关它的更多信息Bugzilla 线程和在 w3c 网站上

但是它确实适用于 Chrome，似乎只有 Firefox 不支持主流浏览器。但它仍然不在标准中，可能直到 CSS 4 才出现。

于 2013-01-23T08:22:51.907 回答