Html 如何使背景图像顶部的透明背景色变为底部？

好的，我的问题是，我在图像背景上有一个半透明的背景色。但当电脑屏幕变大，页面垂直变长，而水平变长时，内容结束后背景色停止。
示例：.

我到处都找过，都试过了（高度：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;
 }

要查看网站和整个代码，请转到：

---

如果有人知道解决这个问题的方法，请告诉我

您已将您的主要背景直接应用于

html

标记。虽然可能，但直接为其设计样式并不是一个好主意，为了良好的实践，始终使用身体或直系后代

我认为不能使用

background

属性在图像上叠加颜色，但可以做的是-可以使用设置蓝色背景

您必须摆弄

z-index

属性才能使div以正确的顺序显示，这样它们就不会被困在颜色下面

e、 g

html{
字体系列：Arial，无衬线；
}
.集装箱{
背景：url（'http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg'）无重复的中心/盖；
垫底：20rem；
位置：相对位置；
z指数：1；
}
.容器：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,34,62,0.7）；
}
.包装纸{
宽度：70%；
保证金：0自动；
z指数：2；
位置：相对位置；
}
.内容{
填充：4rem；
颜色：#fff；
背景：紫色；
z指数：3；
}

内容

您已将您的主要背景直接应用于

html

标记。虽然可能，但直接为其设计样式并不是一个好主意，为了良好的实践，始终使用身体或直系后代

我认为不能使用

background

属性在图像上叠加颜色，但可以做的是-可以使用设置蓝色背景

您必须摆弄

z-index

属性才能使div以正确的顺序显示，这样它们就不会被困在颜色下面

e、 g

html{
字体系列：Arial，无衬线；
}
.集装箱{
背景：url（'http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg'）无重复的中心/盖；
垫底：20rem；
位置：相对位置；
z指数：1；
}
.容器：：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：rgba（0,34,62,0.7）；
}
.包装纸{
宽度：70%；
保证金：0自动；
z指数：2；
位置：相对位置；
}
.内容{
填充：4rem；
颜色：#fff；
背景：紫色；
z指数：3；
}

内容

我这样做了，但同样的问题仍然存在。我要做的是将半透明的背景色粘贴到页面底部。使其完全覆盖图像
甚至您的代码示例也显示了我的问题，因为它只显示层，直到内容结束。（我想我解释错了，但谢谢你的帮助）@很酷，我刚才明白了，很抱歉弄糊涂了。更新了我的答案。非常感谢！差不多了。现在唯一的事情是，通过添加填充底部：20rem；当页面为宽屏幕时，页面会一直经过页脚。看，我遇到的问题只有当网站显示在一个大屏幕上时才会发生，浏览器的垂直方向比水平方向长，并且内容不能填满整个页面。但是当屏幕在水平方向上变小或变长时，我没有问题。这样就不需要填充了。有没有办法只在满足这些条件时添加填充？我认为这是一种自作自受的问题，但您始终可以将媒体查询断点从窗口宽度/高度设置为另一个。但我建议你只选择宽度，因为高度总是很混乱。我这样做了，但同样的问题仍然存在。我要做的是将半透明的背景色粘贴到页面底部。使其完全覆盖图像
甚至您的代码示例也显示了我的问题，因为它只显示层，直到内容结束。（我想我解释错了，但谢谢你的帮助）@很酷，我刚才明白了，很抱歉弄糊涂了。更新了我的答案。非常感谢！差不多了。现在唯一的事情是，通过添加填充底部：20rem；当页面为宽屏幕时，页面会一直经过页脚。看，我遇到的问题只有当网站显示在一个大屏幕上时才会发生，浏览器的垂直方向比水平方向长，并且内容不能填满整个页面。但是当屏幕在水平方向上变小或变长时，我没有问题。这样就不需要填充了。有没有办法只在满足这些条件时添加填充？我认为这是一种自作自受的问题，但您始终可以将媒体查询断点从窗口宽度/高度设置为另一个。但我建议你只选择宽度，因为高度总是杂乱无章的。