如何创建:图片上的导航栏
学习如何使用 CSS 在图像上添加导航菜单。
如何在图像上创建导航栏
第一步 - 添加 HTML:
创建导航栏:
<div class="bg-img"> <div class="container"> <div class="topnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> </div> </div>
第二步 - 添加 CSS:
设置导航栏样式:
.bg-img { /* 使用的图像 */ background-image: url("img_nature.jpg"); min-height: 380px; /* 将图片居中并适当缩放 */ background-position: center; background-repeat: no-repeat; background-size: cover; /* 需要定位导航栏 */ position: relative; } /* 将导航栏容器置于图片内部 */ .container { position: absolute; margin: 20px; width: auto; } /* 导航栏 */ .topnav { overflow: hidden; background-color: #333; } /* 导航栏链接 */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; }