如何在图像上放置导航菜单

您所在的位置:网站首页 html的代码怎么加照片上 如何在图像上放置导航菜单

如何在图像上放置导航菜单

2024-07-15 19:11| 来源: 网络整理| 查看: 265

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3