0

我正在尝试使用 ulkit 的视差 UI 来获得视差背景图像。但是，由于某种原因，ulkit 使背景尺寸大于我的背景图像。我简单的补充了data-uk-parallax="{bg:'-200'}"一下，我的背景图片大小是1440*700，容器的宽度是1920px，但是ulkit是加了一个内联样式background-size:21xxpx 15xxpx。

即使在演示页面中，在第一个示例中，背景图片的原始大小是 800*400，容器的宽度是 822.75px，但是 ulkit 正在添加background-size:1223px 612px到容器中，这是为什么呢？有没有办法防止这种情况发生？

4

2 回答 2

1

从我对视差组件的简短使用中，我发现很难控制视差图像的大小和位置。尤其是在尝试使图像位置在手机、iPad 和台式机上响应良好时。

我的理解是图像需要重新缩放以确保背景图像始终到达容器的所有 4 个边缘（顶部、右侧、底部和左侧）。这是为了防止图像滚动到空白区域。

当您将视差设置为较高时（而不是较小的值以获得更微妙的效果），就会出现问题。这意味着图像被大规模缩放以确保它永远不会超出其容器边界。

我尝试过的潜在解决方案是：

  • 将图像的比例更改为更方形或更矩形（取决于容器的比例），以便重新缩放不那么极端。宽而薄的横幅式视差图像尤其受益于此。
  • 减小bg值（例如"{bg : '-100'}"），使视差效果不那么极端。这意味着需要较少的重新缩放以确保图像在滚动时适合所有 4 个边界。
  • 更改viewport值（例如"{viewport : '0.5'}"），使滚动区域更加本地化，​​因此需要更少的图像重新缩放。当图像位于页面的最顶部或底部时，这很有用，因此视差效果立即开始/结束。
  • 如果像我一样，您需要一个高bg值，那么加快该velocity值（例如"{velocity : '0.2'}"）并减小该bg值会通过使动画“更快”发生来产生更明显的视差效果。这意味着需要更少的图像重新缩放。

最终，对我来说，解决方案需要结合上述选项进行（很多）实验，以找到一个快乐的平衡！

希望有所帮助并且为时不晚:)

于 2017-01-05T10:03:37.180 回答
0

您可以使用

background-size: cover !important;

它对我有用；）

于 2017-01-11T10:02:40.200 回答