字体颜色太浅，看不清楚
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 100px;
background-color: #07cbc9;
}
.top .Logo{
float: left;
}
.top .Logo p{
line-height: 100px;
margin-left: 10px;
color: white;
font-weight: bold;
font-size: 50px;
}
.top .judge ul li{
float: left;
line-height: 100px;
margin-left: 10px;
}
.top .judge{
float: right;
margin-right:10px;
}
.top .judge ul{
list-style: none;
}
.top .judge ul li a{
color: white;
text-decoration: none;
font-weight: bold;
}
.top .judge ul li a:hover{
background-color: black;
}
.banner{
width: 100%;
height: 634.82px;
background-image:url("../tpwj/banner3.jpg");
}
.banner input,textarea{
opacity: 0.5;
background-color: black;
color: white;
}
.banner .loge1q,.loge2q,.loge3q,.loge4q{
width: 437.38px;
}
.banner .loge1q,.loge2q,.loge3q{
height: 30px;
}
.banner .loge4q{
height: 100px;
width: 438.4px;
}
.banner .loge5q{
height: 40px;
}
.banner .loge{
width: 438.5px;
text-align: center;
margin: auto;
top: 30.467%;
position: relative;
}
.about .about1 .title{
width: 100%;
height: 80px;
}
.about .about1 .title h1{
text-align: center;
color: black;
position: relative;
top: 30px;
width: 50%;
margin: auto;
}
.about{
}
.about .about1{
}
.about .about1 .line{
width: 50px;
height: 2px;
background-color: #07cbc9;
margin-left: auto;
margin-right: auto;
}
.about .about1 .info{
width: 90%;
margin: auto;
text-align: center;
margin-top:20px;
}
.about .about1 .info p{
color: black;
opacity: 0.4;
}
.about .about1 .img{
width: 650px;
margin-top: 30px;
margin:auto;
}
.about .about1 .left{
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="Practice4-3.js"></script>
</head>
<body>
<div class="top">
<div class="Logo">
<p>Carrer Bulider</p>
</div>
<div class="judge">
<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>
<div id="clear"></div>
</ul>
</div>
</div>
<!--top完成,里面有一个loge区一个judge区，两者平级关系-->
<div class="banner">
<div class="loge">
<input type="text" name="" placeholder="yourName" class="loge1q">
<br>
<input type="text" name="" placeholder="yourEmail" class="loge2q">
<br>
<input type="text" name="" placeholder="yourPhone" class="loge3q">
<br>
<textarea placeholder="Write your comment here" class="loge4q"></textarea>
<br>
<input type="submit" name="" class="loge5q" value="SEND MESSEAGE">
<br>
</div>
</div>
<div class="about">
<div class="about1">
<div class="title">
<h1>ABOUT</h1>
</div>
<div class="line"></div>
<div class="info">
<p>Lorem Ipsum is simply dummytext of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
<div class="img">
<img src="../tpwj/bb3.jpg">
</div>
<div class="left">
<div class="title1">
<h1>A WORLD</h1>
<h1>ABOUT US</h1>
</div>
<div class="info1">
<p>Praesent dignissim viverra est,sed</p>
<p>bibendum ligula congue non. Sed ac nisl</p>
<p>et felis gravida commodo?Suspendisse</p>
<p>eget ullamcorperipsum. Suspendisse</p>
<p>diam amet.</p>
<div class="explore">
<p>EXPLORE</p>
</div>
</div>
</div>
<div class="about2">
</div>
</div>
</body>
</html>
老师这个里面的白色字体看不清楚 应该怎么调整啊? 别说调高opcity调高了 就和原图不符合了.
正在回答
同学你好，这里的设置白色背景使字体能显示出来就相当于设置遮罩层。遮罩层顾名思义就是有两层，一层覆盖在另一层的上边，上边的一层遮盖了下边的，在上边的一层就是遮罩层。
祝：学习愉快~
同学你好，可以使用遮罩层的方式进行实现。代码如下：
<!-- class=banner的div下添加一个新的div--> <div class="banner"> <!-- 遮罩层 --> <div class="topLayer"></div>
.topLayer{
background-color: #000;
opacity: 0.4;
z-index: 1;
position: absolute;
top: 80px;
width: 100%;
height: 600px;
}
.banner input,textarea{
background-color: transparent;
color: white;
}
.banner .loge{
z-index: 3;
width: 438.5px;
text-align: center;
margin: auto;
top: 30.467%;
position: relative;
}祝学习愉快！
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星