html点击按钮加长菜单栏,HTML如何在图片上添加内容（如文字，菜单栏，按钮等）...

HTML如何在图片上添加内容

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

首先布好局：

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

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

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

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

这三个定位很重要！！图片

此时效果以下：utf-8

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

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

这里是完整代码：

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;}

• 首页
• 服务
• 支持
• 博客
• 下载

飞流太萌了