这里有个小问题,我有一个 Sprite 图像,其中包含具有正常和悬停效果的图标..
这是我现在拥有的 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..
最佳答案
我感受到了你的痛苦!
它不适用于所有浏览器。
建议将 background-position
拆分为 background-position-x
和 background-position-y
以便于更改只有一个轴。可悲的是,W3C 人员认为它不够有用,无法将其添加到标准中。您可以在这里阅读更多相关信息 Bugzilla thread和 here on w3c website
但是它在 Chrome 上工作,似乎只有 Firefox 不支持主流浏览器。但它仍然不在标准中,可能要到 CSS 4 才会出现。
关于CSS 背景位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14475055/