背景圖像下的位置DIV，無論視口（響應）

Question

我有一個1920x550px的大背景圖像，我想直接在它下面放置一個div。 因爲我不知道如何顯示完整的圖像，我用了一個卑鄙的手段，實際上有透明的部分，因此它是1920×1080的圖像填充的圖像，然後我這個顯示它：

.bg-image-big{ 
    background: url(../images/header-bg-big.png) no-repeat center center fixed; 
    background-color: #f7f7f7; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

這延伸到始終全屏。 現在有兩個問題：這不適用於手機（裁剪圖像），我不知道如何將內部div完全放在實際橫幅的「結尾」下方。在理論上和一個1920x1080的屏幕，它是一個550px的邊緣。

<div class="section bg-light-gray bg-image-big"> 
    <div class="inner"> 
     <!-- placed right under the end of the banner --> 
    </div> 
</div> 

任何更好的方法（相當有把握）。任何暗示讚賞！

對於這件事，我使用Bootstrap3和FullPage.js

//編輯：

可視化的每個請求：

我想要什麼：

我有什麼： Full Desktop

響應

這不是關於6/8/12寬，而是關於那些元素的位置。 希望這有助於更多一點......

Answer 1

我認爲你是在正確的軌道上 - 我覺得你可能需要定義bg-image-big的最小高度，以及定義position類型爲相對;因爲外部div的位置已被定義爲relative你應該能夠做到以下幾點：

.bg-image-big{ 
 
    margin:0px; 
 
    padding:0px; 
 
    position:relative; 
 
    display:inline-block; 
 
    background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center fixed; 
 
    background-color: #f7f7f7; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    min-height:40vh; 
 
    width:100%; 
 
} 
 

 
.inner { 
 
    position: absolute; 
 
    display: inline-block; 
 
    padding:30px; 
 
    left:50%; 
 
    bottom:-100px; 
 
    -moz-transform: translateX(-50%); 
 
    -webkit-transform: translateX(-50%); 
 
    -o-transform: translateX(-50%); 
 
    -ms-transform: translateX(-50%); 
 
    transform: translateX(-50%); 
 
    width:50%; 
 
    background:white; 
 
    border: 5px solid black; 
 
    text-align:center; 
 
}

<div class="section bg-light-gray bg-image-big"> 
 
    <div class="inner"> 
 
     <!-- placed right under the end of the banner --> 
 
     Behold, some content! 
 
    </div> 
 
</div>

Answer 2

稍微不同的解決方案。您可以通過在其中使用canvas HTML元素來控制圖像容器的比例。 我們唯一需要解決的就是圖像下容器的寬度。查看此頁面以瞭解如何使用CSS Media Queries。 http://www.w3schools.com/css/css_rwd_mediaqueries.asp

body { 
 
    margin: 0; 
 
} 
 
canvas { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.bg-image-big { 
 
    background: url(http://viceland-assets-cdn.vice.com/viceblog/47451647MCQ-cloudcity.jpg) no-repeat center center; 
 
    background-color: #f7f7f7; 
 
    background-size: cover; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    background-color: #f0f0f0; 
 
} 
 
.inner { 
 
    position: relative; 
 
    display: block; 
 
    width: 50%; 
 
    padding: 30px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    border: 5px solid black; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
} 
 
.inner p { 
 
    display: none; 
 
} 
 

 

 
@media only screen and (min-width: 280px) { 
 
    .inner { 
 
    width: 100%; 
 
    } 
 
    .inner p.col-12 { 
 
    display: block; 
 
    } 
 
    /* 12-Columns Width */ 
 
} 
 

 
@media only screen and (min-width: 768px) { 
 
    .inner { 
 
    width: 66.66%; 
 
    } 
 
    .inner p.col-8 { 
 
    display: block; 
 
    } 
 
    /* 8-Columns Width */ 
 
} 
 
@media only screen and (min-width: 1024px) { 
 
    .inner { 
 
    width: 50%; 
 
    } 
 
    .inner p.col-6 { 
 
    display: block; 
 
    } 
 
    /* 6-Columns Width */ 
 
}

<div class="bg-image-big"> 
 
    <canvas width="100" height="25" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <div class="inner"> 
 
    <p class="col-6">min-width: 1024px</p> 
 
    <p class="col-8">min-width: 768px</p> 
 
    <p class="col-12">min-width: 280px</p> 
 
    <span>Behold, some content!</span> 
 
    </div> 
 
</div>