在 background-color 上应用渐变

Question

我的 background image 应该覆盖我网站的整个背景。

这里是 css 文件中的 body-selector：

body {
    background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: black;
}

在一些奇怪的地方 screen-sizes 图片没有正确覆盖屏幕并且由于 no-repeat 选项 "underflow" 显示为白色。

因此，我在我的 body 选择器中添加了 background-color: black，它作为一个完美的 "fall-back option"。未被图像覆盖的背景现在显示为黑色。

Now I'd like to make the transition between background-color and background-image smother by replacing the simple "black" with a gradient. But I didn't find a solution.

我希望它是怎样的（不工作）：

body { 
    ...
    */apparently not a valid option for background-colour:*/
    background-color: linear-gradient(to right, rgb(1, 3, 0), rgb(26, 31, 38));
}

Answer 1

您需要将此添加到您的正文中：

 min-width: 100% !important;
 min-height: vh !important;

如果您使用 bootstrap，则需要添加 !important。

Answer 2

使用多个背景应该可以解决问题。内容如下：

body {
  background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg), linear-gradient(to right, rgb(1, 3, 0), rgb(26, 31, 38));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
}

Answer 3

如果您更改 html 代码并将 background 添加到容器而不是正文，然后使用伪类 div::after 您可以做到这一点。

检查此代码：

body {
  margin: 0;
  padding: 0;
  background: black;
}

.main--container {
  background-image: url(https://img.4plebs.org/boards/tv/image/1432/79/1432798812366.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  height: 90vh;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.main--container::after {
  display: block;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 1));
  bottom: 0px;
  height: 140px;
  width: 100%;
  content: '';
}

<body>
  <div class="main--container">
  </div>
</body>

在 background-color 上应用渐变

apply gradient on background-color

html

css

background-image

background-color