让表单透明，还有让banner背景半透明怎么处理，请教老师？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>职业导师</title>
<link rel="stylesheet" type="text/css" href="css/work1.css">
<script type="text/javascript" src="js/work1.js"></script>
</head>
<body>
<div class="header">
<a href="#"><img src="image/logo.png"></a>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="banner">
<div class="recover"></div>
<div class="word">
<ul>
<li><a><input type="" name="" value="your Name" size="60"></a></li>
<li><a><input type="" name="" value="your Phone" size="60"></a></li>
<li><a><input type="" name="" value="your Email" size="60"></a></li>
<li><a><textarea rows="8">Write Your Comment Here</textarea></a></li>
</ul>
<input type="button" name="" value="SEND MESSAGE" class="btn">
</div>
</div>
<div class="about"></div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.header .menu ul li a{
text-decoration: none;
color:#fff;
}
.header .menu ul li a:hover{
background: #aaa;
}
.header{
width: 100%;
height: 60px;
background: #07cbc9;
}
.header img{
margin-top: 14px;
margin-left: 100px;
height: 32px;
}
.header .menu{
float: right;
}
.header .menu ul{
list-style: none;
margin-right: 60px;
}
.header .menu ul li{
font-size: 14px;
float:left;
color:#fff;
margin-right: 40px;
margin-top: 20px;
}
.banner{
width: 100%;
height: 790px;
background: url("../image/banner3.jpg") no-repeat;
background-size: 100%;
text-align: center;
position: absolute;
}
.banner .recover{
width: 100%;
background-color: #000;
opacity: 0.4;
z-index: 150;
}
.banner .word{
width: 485px;
margin: 240px auto;
}
.banner .word .btn{
margin: 10px auto;
opacity: 0.4;
width: 130px;
height: 35px;
}
.banner .word ul li{
margin: 10px auto 10px 10px;
opacity: 0.4;
border:1px solid #fff;
}
.banner .word ul li textarea{
width: 485px;
}
.banner .word ul li a:hover{
border-color: #07cbc9;
text-decoration: none;
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星