半透明效果正确吗？
来源：4-3 项目作业
qq__145
2019-11-17 21:30:03
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/common.css">
<title>Career Builder</title>
</head>
<body>
<div class="header">
<div class="logo">
<a href="#"><img src="images/logo.png"></a>
</div>
<div class="menu_title">
<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="banner_img">
<div class="a"></div>
<img src="images/banner3.jpg">
</div>
<div class="forminfo">
<ul>
<li>your Name</li>
<li>your Phone</li>
<li>your Email</li>
<li>Write Your Comment Here</li>
<li>SEND MESSAGE</li>
</ul>
</div>
</div>
<div class="about"></div>
<div class="gallery"></div>
<div class="footer"></div>
</body>
</html>
css
*{
/*清除间距*/
margin: 0;
padding: 0;
/*页面字体*/
font-family: Microsoft YaHei UI;
}
/*链接标签*/
a{
/*清除下划线*/
text-decoration: none;
}
/*列表*/
ul{
/*清除圆点*/
list-style: none;
}
/*顶部*/
.header{
/*垂直居中*/
margin: 0 auto;
/*背景颜色*/
background-color: #07cbc9;
/*高度*/
height: 70px;
}
/*logo图片*/
.header .logo{
/*垂直居中、左边边距*/
margin: 11px 0 0 150px;
/*左浮动*/
float: left;
}
/*导航栏*/
.header .menu_title{
/*右浮动*/
float: right;
/*左边间距*/
margin-right: 100px;
}
.header .menu_title ul li{
/*左浮动*/
float: left;
/*垂直居中*/
height: 70px;
line-height: 70px;
}
/*导航栏链接*/
.header .menu_title ul li a{
/*字体颜色*/
color: #ffffff;
/*大写英文*/
text-transform: uppercase;
/*字体加粗*/
font-weight: bold;
/*间距*/
padding: 25px 10px;
}
/*导航栏链接鼠标滑过*/
.header .menu_title ul li a:hover{
/*背景颜色*/
background-color: #000000;
}
/*banner*/
.banner{
/*垂直居中*/
margin: 0 auto;
}
/*banner背景图片*/
.banner .banner_img{
background-color: #000000;
opacity: 0.4;
}
.banner .banner_img img{
/*宽度*/
width: 100%;
/*高度*/
height: 600px;
}
/*banner信息栏*/
1回答
-
同学你好，已实现透明效果，但作业要求是实现遮罩层，建议同学将.banner_img .a设置为半透明效果，然后覆盖到img上。修改后代码如下：
祝学习愉快！
0
相似问题
回答 1