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="data:images/header1.png" alt= "" width="100%"><div class="words">飞流太萌了</div></div>
</body>
</html>

HTML如何在图片上添加内容（如文字，菜单栏，按钮等）相关推荐

图片上添加贴纸怎么做？这几种方法很简单
在图片上添加贴纸是一种非常实用的图片编辑技巧,通过添加贴纸,图片可以变得更加生动有趣,吸引人们的眼球.贴纸可以是各种形状.颜色和大小,从而丰富图片的视觉效果.例如,在一张风景照片中添加一只卡通动物的图 ...
python代码图片-python实现图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
python开发图片_python实现图片上添加图片
在介绍完给图上添加文字后,我们再介绍给图片上添加图片,也就是图片的叠加. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path ...
在图片上添加文字并生成图片
在图片上添加文字并生成图片开发工具与关键技术:Visual Studio 2015 作者:李德新撰写时间:2019年6月04日在我们的日常生活中,我们经常能看到各样格式的表单,而且有时候我们还要 ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
java pdf 修改内容_生成PDF全攻略之在已有PDF上添加内容的实现方法
项目在变,需求在变,不变的永远是敲击键盘的程序员..... PDF 生成后,有时候需要在PDF上面添加一些其他的内容,比如文字,图片.... 经历几次失败的尝试,终于获取到了正确的代码书写方式. 在此 ...
php 图片上加文字,php使用GD库实现图片上添加文字的方法（代码）
本篇文章给大家带来的内容是关于php使用GD库实现图片上添加文字的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们可以利用php的gd库扩展来对我们的图片进行处理,例 ...
opencv在图片上添加中文汉字（c++以及python）
文章目录一. 汉字点阵字库实现原理 1. 汉字编码 1.1 区位码 1.2 机内码 2. 点阵字库结构 2.1 点阵字库存储 2.2 16*16点阵字库 3. 汉字点阵获取 3.1 利用区位码获取汉 ...
opencv怎么在图片上添加文字？
在 OpenCV 中,可以使用 cv2.putText() 函数在图像上添加文本.这个函数需要指定文本.文本位置.字体.字体比例.颜色.线宽等参数. opencv怎么在图片上添加文字? 下面是一个示例 ...

HTML如何在图片上添加内容（如文字，菜单栏，按钮等）

HTML如何在图片上添加内容

首先布好局：

HTML如何在图片上添加内容（如文字，菜单栏，按钮等）相关推荐

最新文章

热门文章