Question

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

这里是css文件中的正文选择器：

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;
}

在一些奇怪的屏幕尺寸中，图片无法正确覆盖屏幕，由于无重复选项，“下溢”显示为白色。

因此我在我的身体选择器中添加了background-color: black，这是一个完美的“后退选项”。图像未覆盖的背景现在显示为黑色。

现在我想通过用渐变替换简单的“黑色”来使背景颜色和背景图像之间的过渡更加平滑。但我找不到解决方案。

我希望如何（不工作）：

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

如果您更改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>

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

你需要将它添加到你的身体：

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

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

在背景颜色上应用渐变

3 个答案: