所以我希望我的背景是一个动画，所以我做了一些研究，但它导致文本和背景都移动了。我怎样才能阻止文本移动？这是我获得 css 动画的地方:Side-scrolling parallax
这是我的代码:
.not {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-align: center;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('front.png') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
-webkit-animation: moving-images 400s ease infinite;
-moz-animation: moving-images 400s ease infinite;
-o-animation: moving-images 400s ease infinite;
animation: moving-images 400s ease infinite;
}
@keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-moz-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-webkit-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}
@-o-keyframes moving-images {
0% {
left: 0;
}
50% {
left: -9999px;
}
100% {
left: 0;
}
}<!DOCTYPE html>
<html>
<head>
<title>Growtopia Quiz</title>
<meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
<meta name="author" content="Julius Magpayo">
<link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<link rel="icon" type="image/png" href="gq.png" />
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="bg">
<center>
<div class="not">
<img src="logor.gif">
<h2>Welcome To Growtopia Quiz</h2>
<p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
<p>It also updates often to add more levels and features</p>
<a href='easypart1.html' class='button'>PLAY</a>
<br>
<h2>How To Save My Level</h2>
<p>The easiest way to save your progress is to bookmark it</p>
<p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
<br>
<h2>Is This a Scam?</h2>
<p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
<p>I don't and I won't ask for your password or whatsoever</p>
<br>
<h2>Level Progression</h2>
<p>You can easily skip levels but that's up to you</p>
<p>if you don't wanna have thrill in this quiz</p>
<h2>Suggestions? Problems?</h2>
<p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:magpayokevin22@gmail.com">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
</div>
</center>
</div>
</body>
</html>如果背景是唯一移动的东西，那就太好了。 谢谢 :)
最佳答案
用于测试目的。我已经添加了背景图像。我已经在你的 bg 类和 div 下面的页面中添加了一个类为 my_content 的新 div 你可以根据你的情况更改背景图片 URL。
.not {
position:absolute;
bottom:20px;
left:0;
width:100%;
text-align:center;
}
.bg {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:url('https://www.tesla.com/sites/default/files/images/software_update.jpg') 0 0, url('middle.png') 40% 0, url('back.png') 80% 0, #000;
-webkit-animation: moving-images 400s ease infinite;
-moz-animation: moving-images 400s ease infinite;
-o-animation: moving-images 400s ease infinite;
animation: moving-images 400s ease infinite;
}
.my_content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
@keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-moz-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-webkit-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
@-o-keyframes moving-images {
0% {left:0;}
50% {left:-9999px;}
100% {left:0;}
}
<!-- begin snippet: js hide: false console: true babel: false --><!DOCTYPE html>
<html>
<head>
<title>Growtopia Quiz</title>
<meta name="description" content="Easy, Medium and Hard Quiz for Growtopians">
<meta name="author" content="Julius Magpayo">
<link rel="stylesheet" href="main.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="script.js"></script>
<link rel="icon" type="image/png" href="gq.png" />
<meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="bg">
</div>
<div class="my_content">
<center>
<div class="not">
<img src="logor.gif">
<h2>Welcome To Growtopia Quiz</h2>
<p>A Quiz to test your knowledge of Growtopia from Easy to Hard levels.</p>
<p>It also updates often to add more levels and features</p>
<a href='easypart1.html' class='button'>PLAY</a>
<br>
<h2>How To Save My Level</h2>
<p>The easiest way to save your progress is to bookmark it</p>
<p>Your bookmark sign is probably "✰" or just remember the url/link of the level</p>
<br>
<h2>Is This a Scam?</h2>
<p>No, Absolutely not. This is only a quiz, there's no rewards or prizes.</p>
<p>I don't and I won't ask for your password or whatsoever</p>
<br>
<h2>Level Progression</h2>
<p>You can easily skip levels but that's up to you</p>
<p>if you don't wanna have thrill in this quiz</p>
<h2>Suggestions? Problems?</h2>
<p><a href="https://facebook.com/juliuskevinmagpayo" target="_blank">Facebook</a> <a href="mailto:magpayokevin22@gmail.com">Email</a> <a href="https://gamingbeans.ml">Website</a></p>
</div>
</center>
</div>
</body>
</html>关于html - 如何阻止文本在过渡中移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50871317/