HTML如何在图片上添加内容（如文字，菜单栏，按钮等）_web前端如何在图片下面放菜单

作者：Monodyee | 2024-05-20 08:00:36

踩

web前端如何在图片下面放菜单

HTML如何在图片上添加内容

演示效果

最近做的一个效果是网页头部有一张大图，菜单栏漂浮在图片之上。我看到网上讲的很简单，大致原理就是图片定为相对定位，文字定为绝对定位即可。不过我实现的并不顺利，花了几个小时才让菜单栏漂浮在图片上。以下是效果图。

首先布好局：

请注意到此时菜单栏和文字并没有在图片之上，我给菜单栏设置的背景色是半透明的黑色，它若成功漂浮在图片之上，会是半透明的。

现在为图片和文字的盒子.imgw添加位置属性：position:relative;（相对定位）

为文字的盒子.words添加：position:absolute;(绝对定位)

也为菜单栏nav添加：position:absolute;(绝对定位)

这三个定位很重要！！

此时效果如下：

定位完了以后可以看到菜单栏不见了，文字也没有漂浮在图片上。不要着急，菜单栏只是被盖住了，现在给菜单栏设置z-index:10，

文字为它设置距离top:50%,距离left:30%。

这里是完整代码：


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset = "utf-8">
</head>
<style type="text/css">
	nav{
		width: 100%;
		height: 60px;	
		background: rgba(0,0,0,.3);
		position: absolute;
		z-index: 10;
	}
	nav ul{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	nav ul li{
		text-align: center;
		float: left;
		line-height: 60px;
	}
	nav ul li a{
		width: 100px;
		color: #fff;
		font-size: 20px;
		font-weight: 600;
		display: block;
	}
	nav ul li a:hover,nav ul li a:visited{
		text-decoration: none;
		background: rgba(0,0,0,.5);
		color: #fff;
	}
	.words{font-size: 40px;
			letter-spacing: 10px;
			position: absolute;
			top:50%;
			left: 30%;}
	.imgw{position: relative;}
</style>
<body>
	<nav>
		<ul>
			<li class="active"><a href="#">首页</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">支持</a></li>
			<li><a href="#">博客</a></li>
			<li><a href="#">下载</a></li>
		</ul>
	</nav>
	<div class="imgw">
		<img src="images/header1.png" alt= "" width="100%">
		<div class="words">飞流太萌了</div>
	</div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/596837