Bootstrap - 全屏幕標題圖片，後面是背景圖片

Bootstrap新功能。我在設置我的背景圖片時遇到了問題，請遵循標題圖片。Bootstrap - 全屏幕標題圖片，後面是背景圖片

標題部分有它自己的全屏幕背景，然後我想跟着一個平鋪的背景圖像。

我嘗試：

<div class="header">...</div> 

<div class="main-body"> 
    <div class="container">...</div> 
    <div class="container">...</div> 
    ... 
</div> 

<div class="footer">...</div>

具有以下樣式表：

.main-body { 
    text-align: center; 
    background: url(../img/setttings-bg-black.jpg) no-repeat center center; 
    background-size: 1024; 
    background-color: #000000; 
} 

.header { 
    text-align: center; 
    color: #000000; 
    background: url(../img/promo-bg.jpg) no-repeat center center; 
    background-size: cover; 
}

的問題是，主體背景的頂部由頭部本體的底部部分隱藏。

我在做什麼錯？

來源

2017-03-02 tbkn23

不知道圖像的尺寸可能很難診斷問題。您可以通過編輯您的問題並使用包含圖像的片段功能（快捷鍵：Ctrl + M）來設置交互式示例嗎？ – Bonk

看看css的位置 –

驗證此link或link

有你的解決方案。

問題1）我所做的是我在第一個div下面添加了一個<img>（所以div與類的介紹）。 img的分類爲bg。

不是添加這個CSS：

.bg{ 
    position:absolute; 
    z-index:-1; 
    width:100%; 
    height:100%; 
}

在這裏你有一個工作提琴。我添加了很多<br>標籤來向你展示它的工作原理。

您還可以嘗試設置背景圖像height:100%和width:auto;。如果你這樣做，圖像不會在一些屏幕上被擠在一起。

問題2） I給每張幻燈片一個類slide1。我還添加到所有幻燈片類別position:relative;。塔卡看着這個小提琴。

我希望你的問題現在已經成熟。如果您有其他問題，請隨時詢問。

來源

2017-03-02 21:05:04 FabioNoth

Bootstrap - 全屏幕標題圖片，後面是背景圖片

回答

相關問題