uikit視差：爲什麼背景大小正在改變？

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可以在桌面上使用&桌面。

我的理解是圖像需要重新縮放以確保背景圖像始終達到容器的所有4條邊（頂部，右側，底部&左側）。這是爲了防止圖像滾動到空白區域。

問題出現在視差設置較高的情況下（而較小的值則表現出更微妙的效果）。這意味着圖像被大量縮放以確保它永遠不會超過其容器邊界。

，我試圖潛在的解決方案是：

• 改變圖像的比例是方正或多個矩形（取決於你的容器的比例），以便重新調整是不那麼極端。寬而薄的橫幅式視差圖像尤其受益於此。
• 減小bg的值（例如"{bg : '-100'}"），所以視差效果不那麼極端。這意味着在滾動時，需要較少的重新調整來確保圖像適合所有4個邊界。
• 更改viewport值（例如"{viewport : '0.5'}"），以便滾動區域更加局部化，因此需要更少的圖像重新縮放比例。當圖像位於頁面的頂部或底部時，這非常有用，因此視差效果立即開始/結束。
• 如果像我一樣，你需要高bg值，則加快了velocity值（例如"{velocity : '0.2'}"）&降低bg值通過將動畫發生「遲早」給出了一個較爲明顯的視差效果。這意味着需要更少的圖像縮放比例。

最終，我的解決方案需要試驗（很多）與上述選項的組合來尋找一個快樂的平衡！

希望幫助&是不是太晚了:)

Answer 2

您可以使用

background-size: cover !important; 

它的工作對我來說）