CSS渐变叠加实现：容器渐变上方ul下方添加90°半透明黑渐变

解决方案 #

通过以下修改可以实现需求中的渐变叠加效果：

1. 修正.container里linear-gradient的拼写错误（原代码中linear- gradient多了一个空格）
2. 为.container添加相对定位，作为渐变层的定位容器
3. 使用.container::after伪元素创建渐变叠加层，设置90°方向的渐变（30%黑色、70%透明）
4. 调整元素层级，确保渐变层在动画背景上方、ul元素下方

修改后的完整代码 #

CSS代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-weight: 700;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 8fr;
  background: linear-gradient(45deg, rgb(0, 0, 255), rgb(150, 150, 255), rgb(255, 150, 150), rgb(255, 0, 0));
  width: 100%;
  height: 100vh;
  background-size: 300% 300%;
  animation: color 12s ease-in-out infinite;
  position: relative; /* 添加相对定位，作为伪元素的定位基准 */
}

/* 创建渐变叠加层 */
.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 70%);
  z-index: 1; /* 层级高于容器背景，低于ul元素 */
  pointer-events: none; /* 不阻挡ul的鼠标交互 */
}

@keyframes color {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

li a {
  color: white;
  text-decoration: none;
  font-size: 4rem;
  position: relative;
  display: inline-block;
}

ul:hover li a {
  filter: blur(2px);
  color: rgb(192, 192, 192);
}

ul li a:hover {
  filter: blur(0);
  color: white;
  font-size: 4.2rem;
  animation: revealtext 3s;
}

@keyframes revealtext {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(0);
  }
}

ul {
  overflow: hidden;
  position: relative; /* 添加相对定位以设置层级 */
  z-index: 2; /* 层级高于渐变层，确保文本正常显示和交互 */
}

ul li a::before {
  position: absolute;
  content: '';
  bottom: .1em;
  left: 0;
  height: 1px;
  border-bottom: 3px solid white;
  width: 100%;
  transform: translateX(-107%);
  transition: transform 2s;
}

li:hover a:before {
  transform: translateX(0);
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</body>

</html>

关键修改说明 #

• 渐变层实现：通过.container::after伪元素创建全屏渐变，linear-gradient(90deg, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0) 70%)对应需求中的90°方向、30%黑色（半透明）到70%透明的渐变。
• 层级控制：通过z-index设置，让渐变层位于容器背景（默认层级0）和ul（层级2）之间，既覆盖背景又不遮挡列表内容。
• 交互兼容：pointer-events: none确保渐变层不会干扰ul的hover等交互效果。

内容的提问来源于stack exchange，提问作者Harsh Parmar