我很难让多个视差图像在iOS上为这个网站工作。我知道background-attachement: fixed
在iOS中不渲染,所以我尝试了这里和这里的例子,但它们都不是我真正需要的解决方案。
CSS:
.parallax1 {
background-image: url("images/index/practitioners.png");
height: 35vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.parallax2 {
background-image: url("images/index/consumers.png");
height: 35vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.parallax3 {
background-image: url("images/index/network.png");
height: 35vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
HTML:
<a href="practitioners.html" class="paralink"><div class="parallax1"></div></a>
<div align="center">
<p class="pagehead" style="color: #000; width: 50%;">Learn the philosophy and products CArx uses to heal.</p>
</div>
<a href="consumers.html" class="paralink"><div class="parallax2"></div></a>
<div align="center">
<p class="pagehead" style="color: #000; width: 50%;">Information about the Cellular Alchemy Elite program and transform your home into an oasis of wellness and vitality with the latest scientific innovations in health validated for their efficacy.</p>
</div>
<a href="network.html" class="paralink"><div class="parallax3"></div></a>
<div align="center">
<p class="pagehead" style="color: #000; width: 50%;">See who CArx partners with to bring whole body wellness to life.</p>
</div>
我试着把它们放入div与position: fixed
属性,但这不是真的要工作与超过1个图像。我需要多个视差图像
您所附加的代码产生视差滚动!!但是如果你不能准确地看到效果,那么就增加你想要产生视差效果的图像或部分的高度。
如果有进一步的问题,请发邮件给我mulla786mohammedumar@yahoo.com