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="HTML如何在图片上添加内容（如文字，菜单栏，按钮等）" alt= "" width="100%">
<div class="words">飞流太萌了</div>
</div>
</body>
</html>声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
