2017-10-10 71 views
0

我正在构建个人网站。但我有一个很大的问题,background-attachment:fixed在移动设备上不起作用。我有4个部分,用bg修正,+ javascript效果。background-attachment:固定不适用于移动设备

最后一节很重要... 有人可以帮我解决这些问题吗?我会实实在在地炫耀。 该网站是在这里:my site

.hello 
background-image: url("../img/hello.jpg") 
background-repeat: no-repeat 
background-size: cover 
background-position: center 
background-attachment: fixed 
height: 100vh 
min-height: 600px 
display: flex 
flex-direction: column 
justify-content: center 
align-item: center 
text-align: center 

//对不起我的英文不好,

+0

欢迎来到StackOverflow!为了让我们更好地为您提供帮助,能否请您更新您的问题,以便在** [最小,完整和可验证的示例]中显示您的相关代码(http://stackoverflow.com/help/mcve)** 。如果你能让我们知道你有什么** [尝试到目前为止](http://meta.stackoverflow.com/questions/261592)**来解决你的问题也是有帮助的。有关详细信息,请参阅有关** [如何提出良好问题](http://stackoverflow.com/help/how-to-ask)**的帮助文章,然后参加** [网站之旅](http://stackoverflow.com/tour)** –

回答

0

这是对移动不支持的不幸......浏览器必须彻底每次滚动的时间重新呈现图像,并在尽管它看起来像是支持它开始淌出https://css-tricks.com/almanac/properties/b/background-attachment/。此刻得到相当的效果的唯一方法是让你的背景与位置独立要素:固定的,就像...

.background{ 
position: fixed; 
background-image: url(image source); 
top: 0; 
left: 0; 
width: 100%; 
height: 100%: 
z-index: 0; 
} 

并滑过它应该有任何一个位置的一切:相对或立场:绝对与Z指数高于0.

相关问题