我正在构建一个响应性的单页网站,使用多个div,可以扩展到用户浏览器的高度和宽度.我希望在网站上的一个div中的无限循环中将多个背景图像交叉淡入淡出.我试图尽可能地遵循本教程:http://css3.bradshawenterprises.com/cfimg/,但无法根据我的具体需求进行调整.我相信我错过了教程中的一段代码,这对于这个系统是不可或缺的,但是我不能为我的生活理解我必须使用哪些部分以及为了使这个部分能够在案件.(部分原因在于我的说法,部分原因在于教程被奇怪地分割了.)
我是Web Dev的总菜鸟,所以如果我的代码非常错误,请原谅我(并纠正我).
<html>
<body>
<div id="home" class="panel">
<div class="inner">
<div id="backgroundchange">
<div id="back1"></div>
<div id="back2"></div>
<div id="back3"></div>
<div id="back4"></div>
<div id="back5"></div>
</div>
</div>
</div>
<body>
<html>
<!--Div Formatting-->
html, body {
height: 100%;
margin: 0;
}
.panel {
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
color: white;
height: 100%;
min-width: 100%;
text-align: center;
display: table;
margin: 0;
background: #1c1c1c;
padding: 0 0;
}
.panel .inner {
display: table-cell;
vertical-align: middle;
}
<!--Background Animation-->
#backgroundchange.backgroundimg { …