所以我希望我的背景成为一个动画，所以我研究了一下，但它导致文本和背景移动。如何阻止文本移动？我在这里获得了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>
如果背景是唯一移动的东西，那就太好了。 谢谢:)
答案 0 :(得分：1)
请检查更新的HTML，我没有您的bg图像因此无法确认，请使用我的HTML检查一次。
.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('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAAA1BMVEWAgICQdD0xAAAAH0lEQVRYhe3BAQ0AAADCoPdPbQ43oAAAAAAAAACAbwMf/gABw/u21QAAAABJRU5ErkJggg==') 0 0, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARwAAACxCAMAAAAh3/JWAAAAA1BMVEXMzMzKUkQnAAAASElEQVR4nO3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIALA8UNAAFusnLHAAAAAElFTkSuQmCC') 40% 0, url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsx0jp-pSLpj0Y5ts1c_EaGk6nNwHpLR00KZzXJ-UcdA5CAAU9') 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 style="position: relative;height: 100vh;">
<div class="bg">
</div>
<div style="position: absolute; top:0; left:0; height: 100%;width: 100%;">
<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>
</div>
</body>
</html>
答案 1 :(得分：1)
用于测试目的。我添加了背景图片。我已在您的bg类和div下面的页面中添加了一个新的div my_content类，您可以根据自己的需要更改背景图片网址。
.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>