背景图像未延伸到窗口底部

Question

我的背景图像没有一直延伸到窗口底部。

我已经在 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;       
}

Answer 1

将高度设置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;   
}