CSS背景位置

前端之家收集整理的这篇文章主要介绍了CSS背景位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这里的小问题,我有一个精灵图像,其中包含具有正常和悬停效果的图标.

这是我现在拥有的css ..

  1. .wi{
  2. background-image:url(images/icons/small/wi.png);
  3. background-repeat:no-repeat;
  4. display:block;
  5. overflow:hidden;
  6. height:24px;
  7. width:24px;
  8. }
  9.  
  10. .wi-delete{background-position:0 0;}
  11. .wi-edit{background-position:-24px 0;}
  12. .wi-fullscreen{background-position:-48px 0;}
  13. .wi-imageedit{background-position:-72px 0;}
  14. .wi-download{background-position:-96px 0;}
  15. .wi-tags{background-position:-130px 0;}
  16. .wi-windowed{background-position:-154px 0;}

如您所见,图标的正常状态始终为背景位置Y = 0,因此悬停图像均为Y = -24px

我的图标的html是:

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

问题是:可以只更改Y位置,这样我可以为所有图标指定一个CSS行悬停状态,而不是每个图标都有一个css行?

就像是:

  1. .wi:hover{
  2. background-position: auto -24px;
  3. }

代替

  1. .wi-delete:hover{background-position:0 -24px;}
  2. .wi-edit:hover{background-position:-24px -24px;}
  3. ..and so on..

解决方法

我感觉到你的痛苦!

它不适用于所有浏览器.

建议将背景位置分割为背景位置x和背景位置y,以便能够轻松地仅更改一个轴.可悲的是,W3C的人们认为将它添加到标准中是没有用的.你可以在Bugzilla threadhere on w3c website阅读更多相关信息

它确实可以在Chrome上运行,似乎只有Firefox不支持主浏览器.但它仍然没有达到标准,它可能不会在CSS 4之前.

猜你在找的CSS相关文章