使用 css 将颜色淡入透明

问题描述 投票：0回答：3

我想使用 html 和 CSS 重现下图中的导航栏，但我无法理解那种从白色变成透明的淡入淡出效果。

我在网上搜索过，没有成功。 现在这是我的尝试： 

background: linear-gradient(to bottom, #ffffff 50%, rgba(255,255,255,0.5) 100%);
，但它并没有真正起作用。

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;
  position: relative;
}

.navbar-container {
  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 50%, rgba(255, 255, 255, 0.5) 100%);
}

.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;
}
<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>

html css background
3个回答
1
投票

使用您的代码，

.map
div 在常规文档流中从导航栏下方开始。由于在这种情况下导航栏后面的背景是白色（默认情况下），因此您看不到渐变的透明度效果。将 
position: absolute
和 
width: 100%
添加到导航栏，将 
.map
div 移动到下方（= 部分位于导航栏后面）：

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;
  position: relative;
}

.navbar-container {
  height: 4rem;
  width: 100%;
  position: absolute;
  z-index: 1;
  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-image: linear-gradient(to bottom, #ffffff 50%, rgba(255,255,255,0.5) 100%);
}
.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;}
<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>

0
投票

您必须使您的栏位置绝对，以便它位于地图上。因为它是地图被推到它下面。

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;
  position: relative;
}

.navbar-container {
  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, #fff, #fff 50%, rgba(0, 0, 0, 0));
  position: fixed;
  width: 100%;
  z-index: 9;
}

.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;
}
<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>

0
投票

我推荐这个代码和图像。

<body class="map">
  <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="#"></div>
</body>

和

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;
  position: relative;
}

.navbar-container {
  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 0%, rgba(255,255,255,0.5) 30%);
}
.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;}

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.