HTML如何在图片上添加内容(如文字,菜单栏,按钮等) |
您所在的位置:网站首页 › html导航栏添加背景图片代码 › HTML如何在图片上添加内容(如文字,菜单栏,按钮等) |
HTML如何在图片上添加内容
演示效果 最近做的一个效果是网页头部有一张大图,菜单栏漂浮在图片之上。我看到网上讲的很简单,大致原理就是图片定为相对定位,文字定为绝对定位即可。不过我实现的并不顺利,花了几个小时才让菜单栏漂浮在图片上。以下是效果图。 首先布好局:请注意到此时菜单栏和文字并没有在图片之上,我给菜单栏设置的背景色是半透明的黑色,它若成功漂浮在图片之上,会是半透明的。 现在为图片和文字的盒子.imgw添加位置属性:position:relative;(相对定位) 为文字的盒子.words添加:position:absolute;(绝对定位) 也为菜单栏nav添加:position:absolute;(绝对定位) 这三个定位很重要!! 此时效果如下: 定位完了以后可以看到菜单栏不见了,文字也没有漂浮在图片上。不要着急,菜单栏只是被盖住了,现在给菜单栏设置z-index:10, 文字为它设置距离top:50%,距离left:30%。 这里是完整代码: 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;} 首页 服务 支持 博客 下载![]()
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |