背景尺寸与背景位置不缩放位置? [英] background-size with background-position doesn't scale the position?
问题描述
我有一个62个91 * 91像素的图片,这使得整个事情91 * 5642像素。它们以一种动态网格的形式显示,该网格根据用户/指针的移动而增长和缩小。有时一个元素(std 91 * 91 px)放大,使其为120 * 120像素。显然,我想让背景增长,整个91 * 91像素的图像显示在整个120 * 120元素。
输入背景-size:100%auto
使宽度总是完美的。问题现在是 background-position
期望其值也被更新!所有62个元素都有inline style = background-position等
。我无法从内联更新背景位置。我想要的背景首先位置,然后调整大小(缩放),不调整大小,然后定位(缩放到错误的位置)。
我不知道我在做任何意义。要澄清一些:
- 所有元素都有
width:91px; height:91px;第二个图像的内联样式为
background-position:0 -91px
/ code>。 - 当你悬停那个元素时,它会得到一个样式
width:120px; height:120px;
然后它显示第二个图像的大部分和第一个的一些部分,因为定位发生后调整大小=( - 背景位置(放大/悬停后)到
0 -120px
,它会正确对齐(但显然它是错误的,当不放大/悬停。)
一个很容易的解决方案是使用实际的 zoom:1.3
或 transform :scale(1.3)
,但是转换非常慢。
我必须缺少一些东西,CSS必须比这更聪明。
sprite的背景大小...这不是不可能的!
sprite如何是我的,所以我可以让它有一个120 * 120
编辑:使用示例小提琴:http://jsfiddle.net/rudiedirkx/g4RQx/ 聪明答案1: background-position:0 calc(100%/ 61 * 2)
(61因为62张图片,2张因为第三张图片)
$ b
> background-position:0 3.28%;
http: //jsfiddle.net/g4RQx/18/
I've a sprite of 62 images of 91 * 91px, which makes the whole thing 91 * 5642 px. They're displayed in sort of a dynamic grid that grows and shrinks depending on user/pointer movement. Sometimes an element (std 91 * 91 px) zooms in to make it 120 * 120 px. Obviously I want the background to grow with so that the entire 91 * 91 px image is shown in the entire 120 * 120 element.
Enter background-size: 100% auto
to make the width always perfect. Problem now is that background-position
expects its values to be updated as well! All 62 elements have inline style=background-position etc
. I can't update the background position from inline. I want the background to first position and then resize (zoom), not resize and then position (zoom to wrong position).
I'm not sure I'm making any sense. To clarify somewhat:
- All elements have a style of
width: 91px; height: 91px; background-size: 100% auto;
. - The second image would have an inline style of
background-position: 0 -91px
. - When you hover that element it gets a style
width: 120px; height: 120px;
and then it shows most part of the 2nd image and some part of the 1st, because positioning happens after resizing =( - If I change the background-position (after zoom/hover) to
0 -120px
, it aligns correctly. (But then obviously it's wrong when not zooming/hovering.)
A very easy solution would be to use actual zoom: 1.3
or transform: scale(1.3)
, but that's VERY VERY slow with transitions.
I must be missing something. CSS has to be smarter than this. A sprite with background-size... That's not impossible is it!?
How the sprite looks is up to me, so I could make it have a 120 * 120 grid instead of 91 * 91, if that would be simpler...
EDIT: With example fiddle: http://jsfiddle.net/rudiedirkx/g4RQx/
Smart answer 1: background-position: 0 calc(100% / 61 * 2)
(61 because 62 images, 2 because 3rd image)
it's actually pretty simple, just use percentage position.
background-position: 0 3.28%;
这篇关于背景尺寸与背景位置不缩放位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!