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时，如果图像的宽高比与窗口不同，则会使图像的数量减少。

＆＃13;

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

＆＃13;

Answer 2

尝试使用：

background-size: cover;

Answer 3

您可以使用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;  
}

Answer 4

谢谢大家的帮助！在查看答案后我更新了我的代码，现在我有以下内容（对于遇到类似我的问题的人）：

  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和body高度设置为100％就是诀窍（我必须将两段代码组合起来才能工作）。

背景图像没有延伸到窗口的底部

4 个答案: