如何让一个div出现在背景图片

首先这里是我设计的图像，使其更易于理解：如何让一个div出现在背景图片

我在试图创造出现在顶部的中心内容的过程该图像，虽然当我添加div到我的HTML背景颜色只是为了测试它们在哪里，我看到没有改变从上面的图像。我想知道是否它们出现在图像下方或背后，尽管我已经改变了z-index而没有成功。

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

来源

2017-02-11 Xander

？ –

@UkkarshBais包装，我给它一个水色bg coloir只是让我可以看到它在页面上的位置，但没有出现 – Xander

你可以尝试这两件事，首先给图像的Z-索引为-1，只是为了测试并将包装的z-index指定为999，那么您肯定会知道哪些不起作用。希望这可以帮助。 –

如果你从你的第一个图像在地图谈论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; 
}

来源

2017-02-11 15:17:05 GlueDigiStu

不是地图，只是一个普通的div容器，它最终会拥有像里面的地图一样的东西。我只想要一个div出现在图像上，但不明白为什么它不出现@GlueDigiStu – Xander

我真的不能使用提供的代码，但我可以告诉你你应该做什么。您应该在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

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

来源

2017-02-11 15:27:10

我不希望头部有背景图像，头部很好。我想要图像也保持它在哪里我只是不明白为什么水色的包装div没有出现在它的顶部@Radu B – Xander

我已经做了一个简单的笔以更好的理解：http：///codepen.io/anon/pen/ggQJpX。灰色区域是背景图像的占位符，黑色容器是div，它位于背景图像上并居中。当然，div容器可以装满任何东西。这不是你要求的吗？ –

你可以设置一个图像作为背景，并添加绝对定位的内容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-q-c-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

来源

2017-02-11 15:39:31 Banzay

是的，这更接近我需要的感谢，我也只是让它自己工作，并且问题似乎是将包装的高度设置为100％。如果我设置像素高度，那么div显得很好，一切正常，你知道为什么100％的高度导致div消失吗？感谢@Banzay – Xander

我认为首先你需要为'html，body'设置尺寸 – Banzay

也许一个嵌套的div是多余的，但我没有捕获什么是包装做的。 – Banzay

如何让一个div出现在背景图片

回答

相关问题