使用 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">❮</span>
</div>
<div class="brand-title-area">Find Bike</div>
<div class="empty-cell"></div>
</div>
<div class="map"></div>
</body>3个回答
1
投票
投票
使用您的代码，
.mapposition: absolutewidth: 100%.mapbody, 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">❮</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">❮</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">❮</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;}
最新问题
- 通过具有子域映射的应用程序网关在私有 VNET 中公开容器应用程序
- Python：对 xarray 数据使用 hvplot.quadmesh 在图中显示“混合”颜色
- 带有 AndroidView 的放大镜修改器和相机预览
- phpStorm 7 代码完成停止工作
- C 头文件 /linux/if_arp.h 有错误
- 通过 Graph API 查找用户失败，并显示“引用属性对象不存在”
- Terraform 远程后端未从 Terraform Cloud 环境变量获取 AWS 凭证
- 无法从 Companies House 和 HMRC API 获取营业额数据超过 200 万英镑的数据
- 在不使用 web.config 的情况下抑制 .Net Core 网站中的 X-POWERED-BY 标头
- 如何使用 Telegram 机器人转发带有媒体的消息？
- pandas set_index 无法按多列的预期工作
- 将列表<object>绑定到Datagrid WPF，C#
- 捕获嵌套在另一个异常中的异常
- NextFlow：DAG可以静态生成吗？
- 修剪字符串开头和结尾的非字母
- 如何在 flutter 中显示带有时间的国家/地区缩写（例如迪拜 7:55 PM DXB 或巴基斯坦 7:55 PM PKT）
- 需要帮助了解 ingress-nginx（后端证书身份验证）
- 本地 Azure Function 启动使用错误的 Azurite 服务地址
- 更改 Sublime Text 2 的透明度
- aws s3 虚拟托管样式 URL 与路径样式 URL 之间有什么区别
© www.soinside.com 2019 - 2024. All rights reserved.