这里的小问题,我有一个精灵图像,其中包含具有正常和悬停效果的图标.
这是我现在拥有的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..
解决方法
我感觉到你的痛苦!
它不适用于所有浏览器.
建议将背景位置分割为背景位置x和背景位置y,以便能够轻松地仅更改一个轴.可悲的是,W3C的人们认为将它添加到标准中是没有用的.你可以在Bugzilla thread和here on w3c website阅读更多相关信息
它确实可以在Chrome上运行,似乎只有Firefox不支持主浏览器.但它仍然没有达到标准,它可能不会在CSS 4之前.
原文地址:https://www.jb51.cc/css/215081.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。