uikit parallax：为什么背景大小被改变？

Question

我正在尝试使用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 ， 为什么是这样？反正有没有阻止这个？

Answer 1

根据我对视差组件的简要使用，我发现很难控制尺寸和尺寸。视差图像的定位。特别是在试图使手机，iPad和iPad上的图像位置看起来很好时。桌面。

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

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

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

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

最终，我的解决方案需要通过以上选项的组合进行实验（很多），以找到快乐的平衡！

希望有帮助＆amp;还不算太晚：）

Answer 2

您可以使用

background-size: cover !important;

这对我有用;）