背景尺寸与背景位置不缩放位置？

本文介绍了背景尺寸与背景位置不缩放位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个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

编辑：使用示例小提琴：jsfiddle/rudiedirkx/g4RQx/

聪明答案1： background-position：0 calc（100％/ 61 * 2）（61因为62张图片，2张因为第三张图片）

$ b

> background-position：0 3.28％;

http： //jsfiddle/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: jsfiddle/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%;

jsfiddle/g4RQx/18/