CSS背景位置 [英] CSS background-position

问题描述

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

Little question here, i have a sprite image that contain icons with normal and hover effects..

这是css我现在有..

And this is the css i have for now..

.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

As you can see, the normal state of the icons is always with background position Y = 0, so the Hover images are all at Y = -24px

我的图标的html是：

My html for the icons is:

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

推荐答案

！

它不能在所有浏览器上使用。

It doesn't work on all browsers.

建议拆分 background-position 至 background-position-x 和 background-position-y 能够容易地改变一个轴。可悲的是，W3C人们认为它不足以将其添加到标准。您可以在这里阅读更多相关资讯： Bugzilla主题和这里在w3c网站

It was suggested to split background-position to background-position-x and background-position-y to be able to easily change one axis only. Sadly W3C people decided it was not useful enough to add it to the standard. You can read more about it here Bugzilla thread and here on w3c website

它在Chrome上工作，似乎只有Firefox不支持它从主要的浏览器。但它仍然不在标准，它可能不是直到CSS 4。

It does however work on Chrome, it seems like only Firefox does not support it from major browser. But it's still not in the standard and it may not be until CSS 4.

这篇关于CSS背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！