全屏幕背景圖像周圍的空白空間

Question

我想在網頁中心放置一個固定的圖像，我想要剩餘的空間充滿背景或不透明度，但兩者都不起作用。

.imagecontainer 
 
{ 
 
    
 
    float: left; 
 
overflow: auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: black; 
 
} 
 
.imagepop { 
 
    
 
    background: black; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    overflow: auto; 
 
    position: fixed; 
 
    right: 0; 
 
    top: 0; 
 
} 
 

 
#topright { 
 
    background: silver; 
 
    text-decoration: none; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 20; 
 
    display: block; 
 
    
 
}

<div class="imagecontainer"><img id="image" src="http://img.cricinfo.com/espncricinfo/Img_nav-div-background.gif" class="imagepop" /> 
 
    <a id="topright" href="#" title="TopRight">Close</a></div>

Answer 1

它的工作，但你的imagecontianer是0像素的高度。 添加

position: absolute 

你的形象conainer

或easies方式：

.imagecontainer 
{ 
    position:absolute; 
    left:0; 
    top:0; 
    right:0; 
    bottom:0; 
    background: black; 
}