javascript - 渐变不使用“背景附件：固定！重要；”？什么是替代方案？

Question

作为 web 开发的新手，我尝试了一个不错的登录。我无法正确定位元素，我被迫使用“背景附件：固定！重要；”。

有没有其他方法可以在不使用 ``` background-attachment: fixed !important 的情况下获得相同的结果{下面给出的图片}

这是我的代码：

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100%;
  background: linear-gradient( red, green);
  background-attachment: fixed !important;
}

.box {
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #191919;
  text-align: center;
}

.box h1 {
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}

.box input[type="text"],
.box input[type="password"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}

.box input[type="text"]:focus,
.box input[type="password"]:focus {
  width: 280px;
  border-color: #2ecc71;
}

.box input[type="submit"] {
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 40px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}

.box input[type="submit"]:hover {
  background: #2ecc71;
}

<form class="box" action="index.html" method="POST">
  <h1>Login</h1>
  <input type="text" name="" placeholder="Username">
  <input type="password" name="" placeholder="password">
  <input type="submit" name="" value="Login">
</form>

我想要的结果

我在谷歌上搜索了很多来为这个简单的问题找到一个很好的解决方案，但是变得更加困惑，所以我想要一些有经验的人对此的建议，以及作为初学者应该做和不应该做的事情。

{ 对于答案，如果您能提供整个代码并解释为什么选择特定样式以及它如何解决一般问题，我将不胜感激（我读到使用“背景附件：固定！重要；”可能会造成麻烦） } 谢谢。

------------------------ 编辑后 ------------- ---------

这里的问题是，没有“背景附件：固定！重要；”背景渐变不起作用。如果我将位置作为“box”元素的相对位置，则结果与我想要的不同。

所以，我希望位置正确{根据图像}，有背景渐变，没有 background-attachment: fixed !important;

标签： javascripthtmlcssuser-interfaceweb-deployment

Answer 1

您可以使用 javascript 设置背景高度等于您的滚动。