这是我的HTML
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
</head>
<body >
<section id="page">
<ul class="cb-slideshow">
<li>
<span style="background: #009dff;">Image 01</span>
<div><h3>Colourity</h3></div>
</li>
<li>
<span style="background: #003840;">Image 02</span>
<div><h3>Colourity</h3></div>
</li>
<li>
<span style="background: #02A676;">Image 03</span>
<div><h3>Colourity</h3></div>
</li>
<li>
<span style="background: #4FAAC9;">Image 04</span>
<div><h3>Colourity</h3></div>
</li>
<li>
<span style="background: #FF5952;">Image 05</span>
<div><h3>Colourity</h3></div>
</li>
<li>
<span style="background: #96D6D9;">Image 06</span>
<div><h3>Colourity</h3></div>
</li>
</ul>
</section>
</body>
</html>
我的CSS很长，所以我想将其粘贴为here。这就是我要实现的目标。我希望能够向下滚动并在您当前看到的here下面添加内容（这是获得代码的演示）。我已经尝试摆弄CSS了几个小时，但没有任何东西能够修复它。有任何想法吗？
最佳答案
完成所需操作的最简单方法是将.cb-slideshow类的位置样式从固定更改为绝对。因此，CSS的该部分将如下所示：
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
然后，您需要担心的下一个问题是如何确保您的内容不位于背景之上。一种方法是完全定位内容（
position: absolute），并将其从顶部偏移100％（top: 100%;或与.cb-slideshow高度匹配的任何值）。html,body{
min-height: 100%;
margin: 0;
padding: 0;
}
#content{
top: 100%;
position: absolute;
}
我已经更新了JSFiddle以演示这些想法：http://jsfiddle.net/3yxUP/3/。背景和内容之间存在一些重叠，但是我认为JSFiddle UI可能只是一个问题。要解决此问题，您可以添加
#content{padding-top:15px;}或类似的内容。编辑：我知道为什么背景上方有一些空格-这是因为您使用的元素是ul，通常将其呈现为列表，列表前（和后）有一定余量。无论如何，为了解决这个问题，我添加了：
ul{
margin:0;
}
li{
list-style: none;
}
您应该考虑阅读有关这些CSS样式的更多信息，以及它们如何影响内容的呈现。无论如何，更新的JSFiddle在这里：http://jsfiddle.net/3yxUP/5/。