让表单透明，还有让banner背景半透明怎么处理，请教老师？
来源：4-3 项目作业
慕粉1465475474
2020-02-29 21:42:17
<!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回答
-
好帮手慕珊
2020-03-01
同学，你好！分别回答你的两个问题：
1、如果想让表单透明，可以为表单元素设置如下属性：background-color: transparent;
2、如果让banner透明，为recover样式设置opacity属性是可以的，只是recover也需要设置定位，要保证把recover改在banner上面。或者可以按如下思路完成：
1）banner是外层的div
2）banner内部包含<img>标签的div，遮罩层recover和表单所在的div。让这三个div通过定位的方式进行显示。
如果我的回答解决了你的疑惑，请采纳！祝学习愉快！
0
相似问题