如何使div出现在背景图像上

Question

首先，这是我的设计的图像，以使其更易于理解：

我正在尝试创建出现在图像顶部的中心内容，尽管当我将divs添加到具有背景色的html中只是为了测试它们的位置时，我发现上面的图像没有变化。 我想知道它们是否出现在图像下面或后面，尽管我更改了z索引没有成功。

任何帮助将不胜感激，谢谢。

Answer 1

如果您是从第一张图片开始谈论带有地图的div ，那么您将需要在html中执行以下操作：

<div id='header'>
<img src='...'>
</div>

<div id='floater'>
<div id='floatContent'></div>
</div>

然后在您的CSS中，执行以下操作：

.header{
position: fixed;
width: 100%;
}
.floater{
position: absolute;
margin: auto;
}

Answer 2

我不能真正使用提供的代码，但是可以告诉您应该怎么做。 您应该在CSS中添加背景图片，然后在导航栏后的标题内添加所需的div，然后使用CSS将其放置在背景图片上。

<header>
        <nav>
            <ul>
            <li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li>
            <li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li>
                <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li>
            <li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li>
            <li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li>   
            </ul>
        </nav>
    <div id="wrapper">

    </div>
    </header>

CSS：

header {
    background-image: url(img/your-img.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh; /* or whatever you wish */
    background-attachment: fixed;
    position: relative;
}

.wrapper {
    position: absolute;
    width: 1140px; /* or how much do you want */
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

http://codepen.io/anon/pen/ggQJpX

希望我正确理解你想要的。

Answer 3

您可以将图像设置为背景，并在背景上添加绝对定位的内容div。 还将半透明背景设置为.content

 html, body { font-family: 'Open Sans', sans-serif; background-color: #f3f3f3; color: #666; margin: 0px; padding: 0px; width: 100%; height: 100%; } #Page { position: relative; padding-top: 100px; background: url('http://lorempixel.com/output/food-qc-640-480-1.jpg') no-repeat; background-size: cover; height: 100%; width: 100%; } #wrapper { width: 1280; height: 100%; } #home-bg { position: fixed; height: 100%; width: 100%; opacity: 0.8; z-index: -1; } header { background-color: #1c1c1b; font-family: 'Century gothic'; font-size: 180%; height: 100px; width: 100%; border-bottom: solid; border-bottom-color: #009641; border-bottom-width: 5px; position: fixed; line-height: 50px; z-index: 1000; overflow: hidden; transition: all 0.8s ease; } .header-image { align-content: center; height: 100px; transition: all 0.8s ease; } .scroll { height: 80px; font-size: 180%; } .header-image-scroll { height: 80px; } #center-column { background-color: white; width: 1080px; height: 100%; box-shadow: 0px 1px 5px #888888; margin: 0 auto; padding-bottom: 10px; } nav { } nav ul { text-align: center; display: table; margin: auto; } nav li { display: table-cell; vertical-align: middle; /*display: inline;*/ padding: 0 10px; } nav li a { color: #009641; text-decoration: none; } nav li a:hover { color: #e2030e; } .content { position: absolute; top: 50%; left: 50%; width: 25%; height: 25%; transform: translate(-50%, -50%); background: rgba(180,255,180, 0.5); border: 2px solid green; color: red; }

 <body id="chesters"> <header> <nav> <ul> <li><a href="Menu.html" style="padding: 0 20px 0 20px;">Menu</a></li> <li><a href="Burritos.html" style="padding: 0 20px 0 20px;">Burritos</a></li> <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li> <li><a href="Contact.html" style="padding: 0 20px 0 20px;">Contact Us</a></li> <li><a href="About.html" style="padding: 0 20px 0 20px;">About Us</a></li> </ul> </nav> </header> <div id="Page"> <div id="wrapper"> <div class="content">Lorem ipsum dolor amet </div> </div> </div> <!-- Page --> </body>

如何使div出现在背景图像上

问题描述

3 个解决方案

解决方案1
0 2017-02-11 15:17:05

解决方案2
0 2017-02-11 15:27:10

解决方案3
0 2017-02-11 15:39:31

如何使div出现在背景图像上

问题描述

3 个解决方案

解决方案1 0 2017-02-11 15:17:05

解决方案2 0 2017-02-11 15:27:10

解决方案3 0 2017-02-11 15:39:31

解决方案1
0 2017-02-11 15:17:05

解决方案2
0 2017-02-11 15:27:10

解决方案3
0 2017-02-11 15:39:31