html - 背景大小移动图像

Question

我正在使用 skrollr 创建缩放效果，与 this 非常相似.

我使用的背景图像是 SVG，缩放效果是通过将背景大小从非常高的值 (>2500%) 更改为 100% 来应用的。现在，一切正常，似乎 css 属性“background-size”是有限的。我不能应用高于 ~2600% 的值。如果我这样做，根据浏览器的不同，背景图像将被移动或根本不会显示。

出现的问题是，对于固定值(例如 2500%)，根据用户的屏幕尺寸和分辨率，图像可能无法正确显示(或根本无法显示，如上所述)。有没有一种方法可以根据屏幕尺寸和分辨率来计算最大可能的背景尺寸，以便正确显示图像？

JSFiddle

CSS:

.bg-1 {
    background-color:black;
    background-image:url('http://imgh.us/world-map_sw-r.svg');
    background-size:3000% auto; /* change this to something (really) big, e.g. 7000 */
    background-position-y:43.55%; /* this number is specific to the svg */
    background-position-x:52.5%; /* this numbers is specific to the svg */
    background-repeat:no-repeat;
}

HTML:

<section class="content bg-1">
  <h1>Lorem ipsum dolor sit amet</h1>
</section>

Answer 1

尝试使用 px 而不是使用 % 因为 % 的最大值为 100

这是我的 JsFiddle .