HTML如何在图片上添加内容(如文字,菜单栏,按钮等)

2022年6月25日08:14:58

HTML如何在图片上添加内容

演示效果

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

首先布好局:

HTML如何在图片上添加内容(如文字,菜单栏,按钮等)

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

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

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

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

这三个定位很重要!!

此时效果如下:

HTML如何在图片上添加内容(如文字,菜单栏,按钮等)

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

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

HTML如何在图片上添加内容(如文字,菜单栏,按钮等)

这里是完整代码:

<!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>

  • 作者:dengdengda
  • 原文链接:https://blog.csdn.net/dengdengda/article/details/48752357
    更新时间:2022年6月25日08:14:58 ,共 1257 字。