网页布局：您好，请问这里怎么设置背景色，麻烦看下代码？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>career builder</title>
<link rel="stylesheet" href="..\css\网页布局2-9作业题.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="logo">
<img src="..\images\网页布局2-9作业题\logo.png" alt="logo">
</div>
<div class="nav">
<ul>
<li>HPME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!-- 中部 -->
<div class="main">
<!-- banner -->
<div class="banner">
<div class="banner-jpg">
<img src="..\images\网页布局2-9作业题\banner3.jpg" alt="jpg">
</div>
<!-- 遮罩层 -->
<div class="toplayer">
<div class="toplayer-top">
<form action=" " name="your-information"> <!-- form提交路径-->
<table>
<tr>
<td><input type="text" placeholder="your Name"></td>
</tr>
<tr>
<td><input type="text" maxlength="11" placeholder="your Phone" oninput="value=value.replace(/[^\d]/g,'')"></td>
</tr>
<tr>
<td><input type="email" placeholder="your Email"></td>
</tr>
<tr>
<td><textarea placeholder="Write Your Comment Here"></textarea>
</tr>
<tr>
<td><button type="submit" form="your-information">SEND MASSAGE</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<!-- ABOUT区 -->
<div class="ABOUT">
<div class="about-top">
<div class="title">ABOUT</div>
<label class="line"></label>
<div class="word">
Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry. Lorem Ipsum has been the industry's standerd dummy<br>text ever since the 1500s.
</div>
</div>
<div class="jpg-left">
<div class="title">A WORD <br> ABOUT US</div>
<div class="content">
<div class="word">
Praesent dignissim viverra est, sed<br>bibendum ligula congue non, Sed ac nisl<br>et felis gravida commodo? Supendisse<br>egent ultamcorper ipsum. Supendisse<br>diam amet.
</div>
<a href=""><button>EXPLORE</button></a>
</div>
</div>
<div class="jpg">
<img src="..\images\网页布局2-9作业题\bb3.jpg" alt="">
</div>
<div class="jpg-right">
<div class="common">
<div class="number">70000</div>
<label class="line"></label>
<div class="word">students</div>
</div>
<div class="common">
<div class="number">600</div>
<label class="line"></label>
<div class="word">Faculty</div>
</div>
</div>
</div>
</div>
</body>
</html>
------------------------------------------
*{
padding: 0;
margin: 0;
}
/*下面为头部样式*/
.header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
.header .logo {
margin-left: 150px;
float: left;
margin-top: 16px;
}
.header .nav{
float: right;
color: #ffffff;
}
.header .nav{
margin-right: 50px;
}
.header .nav ul li{
list-style: none;
float: left;
line-height: 80px;
margin-right: 30px;
font-weight: bold;
}
/*下面为banner区*/
.main .banner img{
width: 100%;
height: 800px;
}
.main .banner .toplayer{ /*遮罩层*/
position: absolute;
top: 80px;/*距离头部的距离*/
left: 0;
width: 100%;
height: 800px;
background-color: rgba(0,0,0,0.5);
}
.main .banner .toplayer .toplayer-top{ /*设置内容居中*/
width: 600px;
height: 400px;
position: absolute;
/*background-color: blue;*/
top: 400px;/*不包括头部的高度，遮罩层高度的一半*/
margin-top: -200px;
right: 50%;/*遮罩层宽度的一半*/
margin-right: -300px;
z-index: 2;
}
.main .banner .toplayer .toplayer-top form {
width: 600px;/*设置宽和高toplayer-top一样*/
height: 400px;
margin-left: 50px;
}
.main .banner .toplayer .toplayer-top input{
width:500px;
height: 40px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: #ffffff;
}
.main .banner .toplayer .toplayer-top textarea{
resize: none;
width: 500px;
height: 100px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: #ffffff;
}
.main .banner .toplayer .toplayer-top button{
width: 100px;
height: 40px;
margin-left: 200px;
margin-top: 20px;
border: 2px #ccc solid;
background-color: transparent;
color: gray;
}
/*下面为ABOUT区*/
.main .ABOUT{
width: 100%;
height: 800px;
}
/*about标题*/
.main .ABOUT .about-top .title{
text-align: center;
font-family: "微软雅黑";
font-size: 60px;
font-weight: bold;
margin-top:30px;
}
.main .ABOUT .about-top .line{
background-color: #07cbc9;
display: block;
width: 40px;
height: 2px;
margin:15px auto;
}
.main .ABOUT .about-top .word{
text-align: center;
color: gray;
margin-bottom: 30px;
}
/*about区图片和左右部分*/
.main .ABOUT .jpg-left{
position: absolute;
margin-left: 220px;
}
.main .ABOUT .jpg-left .title{
font-size: 35px;
margin: 10px;
text-align: center;
}
.main .ABOUT .jpg-left .content{
border: 2px #ccc solid;
width: 350px;
height: 200px;
padding: 20px 15px;
background-color: #ffffff;
opacity: 0.5;
position: absolute;
z-index: 1;
}
.main .ABOUT .jpg-left .content .word{
background-color: transparent;
position: absolute;
z-index: 2;
}
.main .ABOUT .jpg-left button{
margin-top: 20px;
width: 80px;
height: 50px;
background-color: black;
color: white;
margin-top: 120px;
}
/*about图片*/
.main .ABOUT .jpg{
float: left;
width:45%;
margin-left: 450px;
}
/*about图片右边的部分*/
.main .ABOUT .jpg-right{
float: left;
width: 25%;
}
.main .ABOUT .jpg-right .common{
border: 1px #07cbc9 solid;
width: 250px;
height: 150px;
text-align:center;
margin-bottom: 50px;
}
.main .ABOUT .jpg-right .common .number{
font-size: 35px;
font-weight: bold;
margin-top: 15px;
}
.main .ABOUT .jpg-right .common .line{
display: block;
background-color: #07cbc9;
width: 40px;
height: 2px;
margin:20px auto;
}
.main .ABOUT .jpg-right .common .word{
font-size: 20px;
}
正在回答
您好，可以使用background-color: rgba(255, 255, 255, 0.4);设置。设置背景颜色之后并设置背景颜色的透明度。祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 626 份
- 解答问题 4930 个
想要学好Web后端开发的中流砥柱语言，本阶段为你轻松铺就扎实的基础，从前端网页布局的搭建到后台PHP开发，助你从零基础到掌握主流开发语言。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星