圖像與背景圖像不顯示

Question

看看下面的JSFiddle

.container { 
 
\t width: 100%; 
 
\t background-color: yellow; 
 
} 
 

 
.classic { 
 
\t display: block; 
 
\t position: relative; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t background-position: center center; 
 
\t background-image: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg"); 
 
\t background-size: contain; 
 
\t background-repeat: no-repeat; 
 
} 
 

 
.classic-img { 
 
\t display: block; 
 
\t position: absolute; 
 
\t overflow: hidden; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0%; 
 
\t left: 0%; 
 
} 
 

 
.classic-img img { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 
.top-menu { 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t position: relative; 
 
\t background-color: red; 
 
} 
 

 
.top-menu-buttons { 
 
\t position: absolute; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 50%; 
 
\t text-align: center; 
 
} 
 

 
.top-menu-buttons .button { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t font-size: 25px; 
 
\t color: white; 
 
} 
 

 
.top-menu-buttons span { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t font-size: 25px; 
 
\t color: white; 
 
} 
 

 
.bottom-menu { 
 
\t width: 100%; 
 
\t height: 50px; 
 
\t position: relative; 
 
\t background-color: green; 
 
} 
 

 
.bottom-menu-buttons { 
 
\t position: absolute; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t width: 80%; 
 
\t text-align: center; 
 
} 
 

 
.bottom-menu-buttons .button { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t font-size: 35px; 
 
\t color: white; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
} \t

<div class="list"> 
 
\t <a class="item"> 
 
\t \t <div id="container" class="container"> 
 

 
\t \t \t <div class="top-menu"> 
 
\t \t \t \t <div class="top-menu-buttons"> 
 
\t \t \t \t \t <button>-</button> 
 
\t \t \t \t \t <span>20</span> 
 
\t \t \t \t \t <button>+</button> 
 
\t \t \t \t </div> 
 
\t \t </div> 
 

 

 
\t \t <div id="classic" class="classic"> 
 
\t \t \t <div id="classic-img" class="classic-img"> 
 
\t \t \t \t <img src="http://bc03.rp-online.de/polopoly_fs/1.4643662.1415087612!httpImage/2100575733.JPG_gen/derivatives/d540x303/2100575733.JPG" /> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t \t 
 

 
\t \t <div class="bottom-menu"> 
 
\t \t \t <div class="bottom-menu-buttons"> 
 
\t \t \t <button class="button button-icon ion-eye">1</button> 
 
\t \t \t <button class="button button-icon ion-refresh">2</button> 
 
\t \t \t <button class="button button-icon ion-crop">3</button> 
 
\t \t \t <button class="button button-icon ion-android-options">4</button> 
 
\t \t \t <button class="button button-icon ion-social-tumblr">5</button> 
 
\t \t </div> 
 
\t </div> 
 
\t </a> 
 

 
</div>

CSS：

我想要實現的是類似以下內容：

紅色區域應該是頂層菜單。它不應該是一個固定的頂級位置，它應該始終位於圖像的頂部。

正如你所看到的圖像有白色的背景和黑色的背景。它應該看起來像一個寶麗來。

綠色區域應該是底部的菜單，但也不是固定在底部，它應該總是在圖像下面。如果沒有足夠的空間，它應該簡單地滾動而不是抓住任何div。我猜主要的問題是在背景圖像與圖像中間的div。

我嘗試了很多年，現在得到正確的CSS，但不幸的是，我很無經驗，我現在可以做的是嘗試和錯誤，但我無法得到它的工作。

Answer 1

從.classic-img刪除position: absolute和.classic-img img

添加margin: 100px auto;調整100px根據自己的需要，你也已經設置背景大小：遏制和BG圖像的長寬比幾乎等於形象，所以你會看到只有一小部分的bg圖像在這裏在小提琴 - jsfiddle.net/18vg13dt/3

此外，如果你想從左側和右側的差距也使用 - margin: 100px 50px;類似根據您的需要。

jsfiddle

Answer 2

您需要設置高度爲類.classic-img

試試這個：

.classic-img { 
display: block; 
position: relative; /*---absolute to relative*/ 
overflow: hidden; 
width: 100%; 
height: 100px; /*----Adjust the height---*/ 
top: 0%; 
left: 0%; 
} 

如果您仍然面臨着問題，請回來，並讓我們知道。

Answer 3

我猜this是你想要的嗎？

.classic { 
    background: url("http://www.pulsarwallpapers.com/data/media/3/Alien%20Ink%202560X1600%20Abstract%20Background.jpg")no-repeat center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.classic-img { 
    padding: 10px; 
    box-sizing: border-box; 
} 

.classic-img img { 
    display:block; 
    width:100%; 
    height:100%; 
}