html - 修复了 Iphone 上的全屏背景图像行为怪异

Question

我尝试在我的页面上有 4 个全屏背景图像(我认为它被称为英雄部分)。我为全屏背景的每一行都使用了这种样式。

.kimiabg {
    background: url(http://kimia-tak.com/wp-content/uploads/2018/02/s2.jpg);
    background-size: cover;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
    padding: 2rem 0;
}

一切都很好。除非在 iPhone 上显示背景。它很模糊。我真的不知道是什么问题。

您可以在此处查看实时网站:http://kimia-tak.com

Answer 1

background-attachment: fixed; 是问题所在。这在 iOS Safari 上并不真正受支持。

Can I use background-attachment ?

iOS Safari:

• Partial support refers to supporting local but not fixed
• Only supports local when -webkit-overflow-scrolling: touch is not used

https://caniuse.com/#search=background-attachment

有关更多信息和解决方法，您可以查看 @fernandopasik 对类似问题的回答:https://stackoverflow.com/a/23420490/7426156