为什么视差效果在移动设备上不起作用？
[英]Why Parallax effect doesn't work on mobile devices?
问题描述
I am working with Laravel 5.4 application having parallax effect for the main background. 
我正在使用对主要背景具有视差效果的Laravel 5.4应用程序。 It works perfectly fine on desktop, and also works perfect on varied screen size through developer tool, but when the same page is accessed via mobile device, the parallax effect doesn't show up. 它可以在桌面上完美运行，也可以通过开发人员工具在各种屏幕尺寸上完美运行，但是当通过移动设备访问同一页面时，不会显示视差效果。 I have added the block of code responsible for the needed effect. 我添加了负责所需效果的代码块。
#promo {
min-height: 25em;
width: 100%;
position: relative;
z-index: 0;
}
<body>
<section id="promo" style="background: url({{$mainImg->path}}) 50% 0px repeat fixed; background-size:cover;">
</section>
</body>
1 个解决方案
解决方案1
1 2017-09-11 11:44:44
The background position fixed doesnt work properly on mobile devices so to fix this, you need to do a simple trick, rather then giving the section background image and make it fix, try to make section:before and set it to position:fixed; 固定的背景位置无法在移动设备上正常工作，因此，要解决此问题，您需要做一个简单的技巧，而不是给出section背景图片并使其固定，请尝试将section:before设置为position:fixed; and give the backgroung image to it. 并为其提供背景图像。
#promo:before{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
background:url('image.jpg');
}
play with z-index and here you go. 玩z-index，然后就可以开始了。 try and let me know. 尝试让我知道。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.