Question

这是我的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，但没有任何东西可以修复它。有任何想法吗？

Answer 1

实现目标的最简单方法是将 .cb-slideshow 类的位置样式从 fixed 更改为绝对。因此，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 <的高度匹配的任何值/ em>的）。

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/。

无法获取要在部分下显示的内容

1 个答案: