我想做一个视差效果但是我尝试了很多方法还是做不到。现在我有一半的视差效果，即背景图像是固定的，没有移动，下一个图像将覆盖上一个图像，但现在我希望它成为当我向下滚动时背景图像也会向下移动，但速度比原来的速度。
<!DOCTYPE html>
<html>
<style>
html, body
{
height: 100%;
width: 100%
}
html
{
overflow:hidden;
}
body
{
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
overflow-x:hidden;
overflow-y:scroll;
}
*
{
margin:0;
padding:0;
font-family: Century Gothic;
}
.top
{
background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.bottom
{
background-image:url('../image/AdobeStock_80592193.jpeg');
height: 100vh;
background-size: cover;
background-position:center;
background-attachment:fixed;
}
.main{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.main2{
max-width: 1500px;
margin: auto;
margin-left:80px;
}
.nav
{
float:left;
list-style-type: …我尝试过一个 CSS 代码，其中一个包含 -webkit 代码，另一个则不包含，但输出是相同的。我使用的是 Google Chrome，但是当我删除转换时：rotate(45deg); 变换源：20% 40%；div不会受到webkit的影响，所以我不知道为什么我们需要添加这个webkit？
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding: 10px;
border: 1px solid black;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: red;
/*-webkit-transform: rotate(45deg);*/ /* Safari 3-8 */
/*-webkit-transform-origin: 20% 40%;*/ /* Safari 3-8 */
transform: rotate(45deg);
transform-origin: 20% 40%;
}
</style>
</head>
<body>
<h1> The transform-origin Property</h1>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>