我有一个62画面91 * 91像素的精灵,这使得整个东西91 * 5642像素.它们显示为一种随着用户/指针移动而增长和缩小的动态网格.有时一个元素(标准91 * 91像素)放大到120 * 120像素.显然,我想让背景增长,整个91 * 91像素的图像显示在整个120 * 120元素中.
输入background-size:100%auto,使宽度总是完美的.现在的问题是,后台位置也希望其值更新!所有62个元素都有内联样式=背景位置等.我无法从内联更新背景位置.我想要的背景首先位置,然后调整大小(缩放),不调整大小,然后放置(缩放到错误的位置).
我不知道我有什么意义有些澄清:
>所有元素的宽度为:91px; height:91px;背景大小:100%自动.
>第二个图像将具有一个内联样式的背景位置:0 -91px.
>当你悬停该元素时,它会获得一个样式宽度:120px; height:120px;然后它显示第二个图像的大部分和第一个的一部分,因为定位发生在调整大小之后=(
>如果我将背景位置(缩放/悬停后)更改为0 -120px,它将正确对齐. (但是当显示不是缩放/悬停时显然是错误的)
一个非常简单的解决方案是使用实际的缩放:1.3或变换:scale(1.3),但这是非常慢的过渡.
我一定是错过了一些东西. CSS必须比这更聪明.具有背景大小的精灵…这不是不可能的!
如何精灵看起来取决于我,所以我可以让它有一个120 * 120的网格,而不是91 * 91,如果这将更简单…
编辑:有例如:http://jsfiddle.net/rudiedirkx/g4RQx/
智能答案1:背景位置:0计算(100%/ 61 * 2)(61因为62张图像,2因为第3张图像)
解决方法
它实际上很简单,只是使用百分比位置.
background-position: 0 3.28%;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。