正在回答
同学你好，可以设置背景图自动拉伸铺满，css下的.banner form进行修改，代码如下：
/*设置背景图片和透明度*/
.banner form{
background: url(image/banner3.jpg) no-repeat;;
width: 100%;
height: 800px;\
overflow: hidden;
background-size:cover;
text-align: center;
opacity: 0.4;
}祝学习愉快！
document.html
<!DOCTYPE html>
<meta charset="gbk"/>
<html>
<head>
<title>Career Builder</title>
<link rel="stylesheet" type="text/css" href="document.css">
<script type="text/javascript" src="document.js"></script>
</head>
<body>
<div class="header">
<a href="#"><img src="image/logo.png" class="img-header"></a>
<ul>
<li>
<a href="#"><p>CONTACT</p></a>
</li>
<li>
<a href="#"><p>EVENTS</p></a>
</li>
<li>
<a href="#"><p>FACULTY</p></a>
</li>
<li>
<a href="#"><p>GALLERY</p></a>
</li>
<li>
<a href="#"><p>ABOUT</p></a>
</li>
<li>
<a href="#"><p>HOME</p></a>
</li>
</ul>
</div>
<div class="banner">
<form action="" method="post">
<div class="div1-form">
<input type="text" name="" value="your Name" style="width: 450px; height: 35px;">
</div>
<div class="div2-form">
<input type="text" name="" value="your Phone" style="width: 450px; height: 35px;">
</div>
<div class="div3-form">
<input type="text" name="" value="your Email" style="width: 450px; height: 35px;">
</div>
<div class="div4-form">
<textarea rows="" cols="" value="" style="width: 448px;height: 130px">Write Your Comment Here</textarea>
</div>
<div class="div5-form">
<input type="submit" name="" value="SEND MESSAGE" style="width: 125px; height: 40px;">
</div>
</form>
</div>
<div class="about">
<div>
<title></title>
<p></p>
</div>
<div></div>
<div></div>
</div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
document.css
body{
width: 1700px;
margin:0 0;
font-family: Microsoft YaHei UI;
}
/*设置顶部*/
.header{
width: 100%;
height: 100px;
background-color: #07cbc9;
position: fixed;
z-index: 800;
}
.header .img-header{
margin-top:20px;
margin-left: 80px;
float: left;
}
.header ul{
margin-right: 80px;
}
.header ul li{
list-style: none;
float: right;
height: 100px;
margin-top: -16px;
}
.header ul li a p{
/*设置段落格式*/
width: 78px;
height: 100px;
line-height: 100px;
color: white;
margin-top: 0px;
text-align: center;
}
.header ul li a{
/*去下划线*/
text-decoration: none;
}
.header ul li a p:hover{
background-color: black;
}
/*设置banner区*/
.banner{
width: 100%;
background-color: black;
position: absolute;
z-index: 200;
}
/*设置背景图片和透明度*/
.banner form{
background: url(image/banner3.jpg);
width: 100%;
height: 800px;
text-align: center;
opacity: 0.4;
}
.banner form .div1-form{
padding-top: 212.5px;
padding-bottom: 25px;
}
.banner form .div2-form{
padding-bottom: 25px;
}
.banner form .div3-form{
padding-bottom: 25px;
}
.banner form .div4-form{
padding-bottom: 25px;
}
input[value]{
color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0)
}
textarea{
color: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0)
}
/*设置悬停在表单时的样式*/
textarea:hover{
border-color: #07cbc9;
}
.banner form .div5-form input[value]:hover{
background-color: #07cbc9;
border: none;
}
input[value]:hover{
border-color: #07cbc9;
}
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星