如何讓一個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出現在背景圖片

回答

相關問題