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

Question

好的，我的问题是，我在图像背景之上有一个半透明的背景色。但是当电脑屏幕太大，页面纵向变长，横向变长时，背景色会在内容结束后停止。
示例：background-color end before the end of the page.

我到处都看了，都试过了（高度：100%；height:100vh；bottom:0；margin:0；等等）。 100% 什么都不做，当使用 100vh 时，当我向下滚动时背景颜色停止，bottom/margin: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 属性在图像顶部堆叠颜色，但您可以做的是 - 您可以使用 [=30= 设置蓝色背景]css pseudo-elements.

您必须 fiddle 和 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>

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

How do I make a transparent background-color that is on top of a background-image go to bottom?

html

css

layout

background-color