如何在背景图像上方设置 div答案

【问题标题】：Howto set a div above a background-image如何在背景图像上方设置 div
【发布时间】：2013-11-03 11:29:49
【问题描述】：

我正在努力实现这一目标： https://www.dropbox.com/s/3zm1qssd3299uat/Social-Bottom.jpg

我想要一个像上图一样位于背景 div 上方的内容 div。

这是我当前的代码：

<!DOCTYPE html>
<html>
<head>
    <title>VisionBeat DJ's Australia</title>
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/nav.js"></script>
    <LINK REL="SHORTCUT ICON" HREF="./favicon.ico">
    <style>
        @font-face {
            font-family:"bold";
            src: url('./fonts/bold.ttf');
        }
        @font-face {
            font-family:"sbold";
            src: url('./fonts/sbold.ttf');
        }
        @font-face {
            font-family:"regular";
            src: url('./fonts/regular.ttf');
        }
        @font-face {
            font-family:"light";
            src: url('./fonts/light.ttf');
        }
        @font-face {
            font-family:"elight";
            src: url('./fonts/elight.ttf');
        }
        html, body {
            height: 100%;
            width: 100%;
            overflow:auto;
            margin:0;
            padding:0;
            border:0;
            font-family:'regular', sans-serif;
        }
        #bg1 {
            height: 100%;
            width: 100%;
            background: url(./images/backgrounds/1.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            z-index:0;
        }
        #bg2 {
            height: 100%;
            width: 100%;
            background: url(./images/backgrounds/2.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            z-index:1;
        }
        #bg3 {
            height: 100%;
            width: 100%;
            background: url(./images/backgrounds/3.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            z-index:2;
        }
        h1 {
            font-family:'bold', sans-serif;
            font-weight:700;
            color:#ecf0f1
        }
        h2 {
            font-family:'sbold', sans-serif;
            font-weight:600;
            color:#ecf0f1
        }
        p1 {
            font-family:'regular', sans-serif;
            font-weight:400;
            color:#ecf0f1
        }
        p2 {
            font-family:'light', sans-serif;
            font-weight:300;
            color:#ecf0f1
        }
        a {
            font-family:'elight', sans-serif;
            font-weight:300;
            color:#ecf0f1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            text-decoration:none
        }
        a:hover {
            font-family:'elight', sans-serif;
            font-weight:200;
            color:#ecf0f1;
            top:0;
            bottom:0;
            left:0;
            right:0;
        }
        nav {
            color:rgba(45, 45, 45, 0.5);
            font-size:1.2em;
            font-weight:300;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: -moz-none;
            -ms-user-select: none;
            user-select: none;
            transition: border-color 0.5s ease;
            border-top:1.5px solid;
            border-color:rgba(45, 45, 45, 0);
        }
        nav a {
            transition: border-color 0.5s ease;
            border-top:1.5px solid;
            border-color:rgba(45, 45, 45, 0);
        }
        nav a:hover {
            border-color: rgba(236, 240, 241, 0.9)
        }
        #floater {
            position:relative;
            float:left;
            height:50%;
            margin-bottom:-100px;
            width:1px;
        }
        #centered {
            position:relative;
            clear:left;
            height:250px;
        }
        #centerfit {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            max-height: 250px;
        }
        #sticky_navigation_wrapper {
            width:100%;
            height:30px;
        }
        #sticky_navigation {
            width:100%;
            height:32px;
            background-color:rgba(45, 45, 45, 0.75);
            text-align:center;
            -moz-box-shadow: 0 0 5px #999;
            -webkit-box-shadow: 0 0 5px #999;
            box-shadow: 0 0 5px #999;
        }
    </style>
</head>

<body>
    <div id="bg1">
        <div id="floater"></div>
        <div id="centered">
            <div id="centerfit">
                <img src="images/logo.png" alt="VisionBeat Logo">
            </div>
            <div id="sticky_navigation_wrapper">
                <div id="sticky_navigation">
                    <nav>
                        <a href="#Social">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Social&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        <a href="#Contact">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        <a href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        <a href="#Events">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Events&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                        <a href="#Pricing">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pricing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <section id="Social"></section>
    <div id="bg2"></div>
</body>

【问题讨论】：

永远不要使用请为间距。使用 CSS padding/margin 或其他方法。
在question上查看我的答案。

标签： css html

【解决方案1】：

您要做的是在 body 标记上设置背景图像，并确保在您设置 z-index 的元素上使用 CSS 定位。我猜你面临的问题是你的内容 div 不在背景图像之上。尝试将内容 div 的定位设置为绝对，并确保在 body 标签上设置背景图像。

【讨论】：