CSS 背景位置

Posted

技术标签:

【中文标题】CSS 背景位置【英文标题】:CSS background-position 【发布时间】:2013-01-06 15:46:28 【问题描述】:

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

这是我现在拥有的 css..

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


.wi-deletebackground-position:0 0;
.wi-editbackground-position:-24px 0;
.wi-fullscreenbackground-position:-48px 0;
.wi-imageeditbackground-position:-72px 0;
.wi-downloadbackground-position:-96px 0;
.wi-tagsbackground-position:-130px 0;
.wi-windowedbackground-position:-154px 0;

如您所见,图标的正常状态总是在背景位置Y = 0,所以Hover图像都在Y = -24px

我的图标 html 是:

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

问题是:可以只更改 Y 位置,这样我就可以为所有图标 Hover 状态分配一条 CSS 线,而不是为每个图标设置一条 CSS 线?

类似:

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

改为

.wi-delete:hoverbackground-position:0 -24px;
.wi-edit:hoverbackground-position:-24px -24px;
..and so on..

【问题讨论】:

你为什么要删除你的last question? @hims056 因为我已经解决了,所以做起来很简单,为了防止投票我删除了它。 谨防删除问题。您通过删除您的问题进入question ban。 :) @hims056 谢谢,我不知道这个。下次我会考虑的。 【参考方案1】:

我感受到你的痛苦!

它不适用于所有浏览器。

建议将background-position 拆分为background-position-xbackground-position-y,以便能够轻松地仅更改一个轴。遗憾的是,W3C 人员认为将其添加到标准中还不够有用。你可以在这里阅读更多关于它的信息Bugzilla thread 和 here on w3c website

但它确实适用于 Chrome,似乎只有 Firefox 不支持主流浏览器。但它仍然不在标准中,可能要等到 CSS 4。

【讨论】:

在浏览器支持方面,background-position 是一个混乱。并非所有浏览器都正确实现 CSS2.1 background-position,更不用说 B&B 级别 3 background-position 或任何被拒绝的提案。 我不知道这些属性,但读到它们在 IE-6 中而不是在 Firefox 中也能工作......这真是一件坏事! @Edga 感谢您描述采取单独的 x,y 位置。

以上是关于CSS 背景位置的主要内容,如果未能解决你的问题,请参考以下文章

CSS3背景大小和背景位置问题

预定义 CSS 背景图片中心位置和覆盖背景大小

为啥 CSS3 右对齐背景图片出现在错误的位置?

CSS 背景位置

CSS盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

CSS3 - 在精灵图像的“背景位置”之间淡入淡出