如何使背景图像上方的透明背景颜色显示在底部？

Question

好吧，我的问题是，我在图像背景上有一个半透明的背景色。 但是当计算机屏幕变大并且页面垂直变长然后水平时，背景颜色在内容结束后停止。
示例： 页面结束前的background-color end 。

我到处寻找并尝试了所有（高度：100％;高度：100vh;底部：0;边距：0;等等）。 100％什么都不做，当使用100vh时，当我向下滚动时，背景颜色停止，底部/边距：0; 没有。

我使用的代码就是这个。

html {
  background: url(../images/back1.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background-color: rgba(0, 34, 62, 0.7);
  margin: -0.5px;
  font-family: verdana, sans-serif;
  color: #b9c8d4;
  text-align: center;
 }

要查看网站和整个代码，请访问： http ： //bienivitesse.com/juluwarlu/

如果有人知道如何解决这个问题，请告诉我。

Answer 1

您已将主背景直接应用于html标记。 虽然可能，直接造型并不是一个好主意，总是使用身体或直接后代为了良好的实践。

我认为你不能使用background属性在图像上叠加颜色，但你可以做的是 - 你可以使用css伪元素设置蓝色背景。

您将不得不摆弄z-index属性以使div以正确的顺序出现，因此它们也不会被卡在颜色之下。

例如

 html { font-family: Arial, sans-serif; } .container { background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center/cover; padding-bottom: 20rem; position: relative; z-index: 1; } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 34, 62, 0.7); } .wrapper { width: 70%; margin: 0 auto; z-index: 2; position: relative; } .content { padding: 4rem; color: #fff; background: purple; z-index: 3; } 

 <div class="container"> <div class="wrapper"> <div class="content">CONTENT</div> </div> </div>