不延伸到窗口底部的背景圖片

我已經在CSS中設置了我的背景圖像以及一堆屬性以使其透明。這是我的CSS：

body {  
    background-image: url("http://www.inc.com/uploaded_files/image/970x450/flatiron-school-1940x900_35912.jpg");  
    background-color: rgba(255, 255, 255, .3);  
    background-repeat: no-repeat;  
    background-size: 100% ;  
    background-blend-mode: color;  
}

來源

2015-08-25 Juvaria Shahid

的html, body高度設置爲100％，使用background-size: cover將背景填充頁面。

使用background-position: center center將使它在圖像長寬比不同於窗口的情況下，甚至可以減少圖像的數量。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    margin: 0; 
 
    background-image: url("//placehold.it/1000x800"); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-blend-mode: color; 
 
}

來源

2015-08-25 19:20:00

謝謝，html，body {}修復了這個問題！ –

嘗試使用：

background-size: cover;

來源

2015-08-25 19:20:47 NadiaFaya

謝謝！這有助於:) –

您可以使用background-size: cover;來擴展你的背景圖片，圖像裁剪，但看起來自然。

如果要包括一切到屏幕，試試這個：

body {  
    background: url("http://www.inc.com/uploaded_files/image/970x450/flatiron-school-1940x900_35912.jpg") center no-repeat;  
    background-color: rgba(255, 255, 255, .3);  
    background-size:100% 100%;  
    background-blend-mode: color; 
}

來源

2015-08-25 19:26:19

感謝您提供完整的代碼！設置背景大小覆蓋工作:) –

謝謝大家的幫助！我更新了我的代碼通過尋找答案後，我現在有以下（的人誰也有類似的地雷問題）：

html, body{ 
    height: 100%; 
} 

body{ 
    background-image: url("MyImageURL"); 
    background-color: rgba(255, 255, 255, 0.3); 
    background-blend-mode: color; 
    background-size: cover; 

}

基本上，添加背景尺寸：蓋;並設置HTML和身高爲100％是訣竅（我不得不將它的兩個代碼片段工作）。

來源

2015-08-27 15:44:59

不延伸到窗口底部的背景圖片

回答

相關問題