如何用CSS实现导航栏从白色渐变为透明的效果？

你的渐变代码语法本身没问题，但看不到效果的核心原因有两点：

• 导航栏处于正常文档流，下方是默认白色的body背景，半透明白色叠加后视觉上和纯白色无差异
• 导航栏未悬浮在地图上方，渐变效果无法透过地图背景体现

修改方案 #

1. 将导航栏设为固定定位，使其悬浮在地图顶部
2. 调整渐变终点为完全透明（rgba(255,255,255,0)），让渐变效果更清晰
3. 确保地图占满整个视口，同时通过层级控制避免被导航栏遮挡

修改后的完整代码 #

CSS部分

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

.map {
  height: 100vh;
  width: 100vw;
  background: url("https://i.imgur.com/p7rm49V.png") no-repeat fixed center;
  background-size: cover;
}

.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  gap: 15px 15px;
  grid-template-areas: "back-button-area brand-title-area empty-cell";
  background: linear-gradient(to bottom, #ffffff 30%, rgba(255, 255, 255, 0) 100%);
  z-index: 10;
}

.back-button-area {
  grid-area: back-button-area;
  justify-self: start;
  align-self: center;
  padding-left: 20px;
}

.brand-title-area {
  grid-area: brand-title-area;
  justify-self: center;
  align-self: center;
}

.empty-cell {
  grid-area: empty-cell;
}

.back-button {
  background-color: #fff;
  border: 1px solid #d5d9d9;
  border-radius: 12px;
  box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
  color: #0f1111;
  cursor: pointer;
  font-family: "Amazon Ember", sans-serif;
  font-size: 13px;
  padding: 10px 15px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  width: 100px;
}

.back-button:hover {
  background-color: #f7fafa;
}

HTML部分

<body>
  <div class="navbar-container">
    <div class="back-button-area">
      <span class="back-button">&#x276E;</span>
    </div>
    <div class="brand-title-area">Find Bike</div>
    <div class="empty-cell"></div>
  </div>

  <div class="map"></div>
</body>

额外说明 #

• 渐变中的百分比（比如30%）可以根据需求调整，控制白色区域的占比
• z-index:10确保导航栏始终在地图上方，避免被其他页面元素遮挡

内容的提问来源于stack exchange，提问作者Edoardo Balducci