CSS背景位置

Question

有一个小问题，我有一个包含正常和悬停效果图标的精灵图像。

这是我现在拥有的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..

- Fr0z3n

---

你为什么删除了你的上一个问题？ - Himanshu

@hims056 因为我已经解决了，这很简单，为了防止被踩我删掉了它。 - Fr0z3n

小心删除问题。如果您删除自己的问题，可能会导致您被禁言 question ban。 :) - Himanshu

@hims056 谢谢，我不知道这个。下次我会记住的。 - Fr0z3n

Answer 1

我感同身受！

它不适用于所有浏览器。

建议将background-position分为background-position-x和background-position-y，以便仅更改一个轴。可惜W3C人员决定没有足够的用处将其添加到标准中。您可以在Bugzilla线程和w3c网站上了解更多信息。

然而，它确实适用于Chrome，看起来只有Firefox不支持主流浏览器。但它仍未成为标准，可能要等到CSS 4才会加入。

- Moseleyi

---

就浏览器支持而言，“background-position”是一团糟。并非所有浏览器都能正确实现CSS2.1的“background-position”，更不用说B&B 3级的“background-position”或任何被拒绝的提案了。 - BoltClock

我不知道这些属性，但是得知它们可以在IE-6中使用而在Firefox中不能使用......真的很糟糕！ - Fr0z3n

@Edga 感谢您描述如何获取单独的x，y位置。 - Zaker