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..

Answer 1

我感觉到你的痛苦！

它不适用于所有浏览器。

有人建议将background-position拆分为background-position-x和background-position-y，以便只能轻松更改一个轴。可悲的是，W3C的人们认为将它添加到标准中是没有用的。您可以在Bugzilla thread和here on w3c website

中详细了解相关信息

然而它在Chrome上运行，似乎只有Firefox不支持主浏览器。但它仍然没有达到标准，它可能要到CSS 4。

CSS背景位置

1 个答案: