嗨，我创建一个视差ui纯css。然而，当我尝试在android和台式机上运行时，一切都很好，但在ios或iPhone上运行时，我得到了奇怪的结果，视差也不起作用。我不知道为什么，但是我能请求帮助吗?我真的很感激.....
谢谢youuu . .你也可以在这里访问代码:https://codesandbox.io/s/busy-stallman-0ecz8b?file=/index.html: 0 - 1721
这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<style>
/* general CSS, unrelated to parallax or img */
body {
background: #fff;
color: #222;
font-family: "Source Sans Pro", sans-serif;
}
.code {
font-family: "PT Mono", serif;
color: #090;
}
.writing {
width: 74%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 560px) {
.writing {
width: 96%;
}
}
/* Parallax CSS */
.background-oregon-grapes {
background-image: url("https://marrio-h.github.io/universal-parallax/demo/img/bg3.jpg");
background-size: 100%;
height: 560px;
width: 560px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 767px) {
.background-oregon-grapes {
height: 330px;
width: 330px;
}
}
/* Image CSS for your SVG */
img {
height: 100%;
width: 100%;
}
</style>
<body>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<div class="background-oregon-grapes">
<img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg" />
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
您是否尝试过使用像bootstrap这样的库来实现此效果?
也检查这种情况https://codepen.io/Everybodyknows/pen/abbyLOZ
似乎你需要写像
这样的代码div.section:last-child {
min-height: 50vh;
padding: 3em calc(20vw - 70px) 6em;
}