0

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

我使用的背景图像是 SVG，通过将背景大小从非常高的值 (>2500%) 更改为 100% 来应用缩放效果。现在，一切正常，预计 CSS 属性“背景大小”似乎是有限的。我不能应用高于 ~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>
4

1 回答 1

1

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

这是我的JsFiddle。

于 2016-01-18T11:37:08.590 回答