Question

我正在尝试让我的背景渐变填充浏览器窗口的可用“不动产”。 Here is an example of what is currently happening.我复制并粘贴了相关代码，如果我遗漏了您需要的任何信息，请告诉我们！

我尝试过列出here和here的方法，但没有一个对我有效。还有其他建议吗，还是我错过了一些明显的东西？谢谢！

.mainbody {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  min-height: 50%;
  width: 100%;
}

<div class="mainbody"></div>

Answer 1

您可以使用的最简单方法是将此渐变应用于body，而不是div。

＆＃13;

body {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  min-height: 50%;
  width: 100%;
}

＆＃13;

<div class="mainbody"></div>

＆＃13;

Answer 2

根据@SergChernata将高度设置为100％或更改body标签以覆盖整个高度：）

.mainbody {
  background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed;
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 50%;
  height: 100%;
  width: 100%;
}

<div class="mainbody"></div>

Answer 3

如果我理解正确，您只需将元素的高度和宽度设置为100％，然后它将覆盖任何设备的所有屏幕尺寸。当然，如果它是一个绝对元素，它必须与已经具有窗口大小的东西相关。现在，尺寸将是最接近父母的100％，其中“position：relative”归因于它。如果你想确保它实际上是100％的屏幕，只要确保它的父母都没有“position：relative”属性。如果你想确定，可以将它们设置为“position：static”。

.mainbody {
  background-image: linear-gradient(#42f4d7, #f4425f);
  border-style: solid;
  border-color: #ffffff;
  font-family: Helvetica, sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="mainbody"></div>

根据浏览器窗口大小调整背景图像大小（HTML，CSS）

3 个答案: