Question

我一直在尝试淡化<div>背景的顶部和底部，但是每次它逐渐消失到几乎中间时，这并不是我想要的。

我想粘贴两个<div>的边界。

background: linear-gradient(white, #c3faec, white);

使用此方法并尝试更改两种颜色的％，但均未成功。

Answer 1

为每种颜色设置明确的距离以开始和停止，然后将中间颜色设置在两个位置，以使该颜色对该区域稳定。

div {
  height: 90vh;
  margin: 5vh;
  background: linear-gradient(white 0%, red 10%, red 90%, white 100%);
}

<div></div>

Answer 2

您可以创建两个CSS伪元素，并使用元素的高度和颜色渐变停止点来独立配置渐变。

示例：https://codepen.io/giumagnani/pen/ZZpmje

div {
  margin: 100px 0;
  background: #2222ff;
  height: 600px;
  position: relative;
}

div::after {
  position: absolute;
  content: "";
  height: 30%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(white 0%, transparent 100%);
}

div::before {
  position: absolute;
  content: "";
  height: 30%;
  width: 100%;
  bottom: 0;
  left: 0;
  background: linear-gradient(transparent 0%, white 100%);
}

Answer 3

您也可以在渐变属性中添加方向。希望这行得通。

div {
  height:100vh;
  background: linear-gradient(to bottom,white, #c3faec, white);
}

<div></div>

Answer 4

通过此CSS代码，您可以使背景从顶部和底部稍微褪色

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: linear-gradient(white 10%, black 80%, white 10%);
}

<html>

<head>
  <title>
    "your title"
  </title>
</head>

<body>
</body>

</html>

如何使背景从顶部和底部略微褪色？

4 个答案: