请问表单如何镂空？字体调成白色为什么不显示了？write your comment该如何置顶？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2-9作业</title>
    <link rel="stylesheet" href="2-9作业.css">
</head>
<body>
  <!--header-->
 <div class="header">
    <div class="logo">
      <img src="../images/logo.png">
    </div>
    <div class="daohang">
      <ul>
        <li>HOME</li>
        <li>ABOUT</li>
        <li>GALLERY</li>
        <li>FACULTY</li>
        <li>EVENTS</li>
        <li>CONTACT</li>

      </ul>
    </div>
  </div>
<!--banner-->
 <div class="banner">
    <div class="background">
      <img src="../images/banner3.jpg">
      <div class="cover"></div>
    </div>
    <div class="form">
      <form>
        <input class="input" type="text" name="your Name" value="your Name">
        <br>
        <input class="input" type="text" name="your Phone" value="your Phone">
        <br>
        <input class="input" type="text" name="your Email" value="your Email">
        <br>
        <input id="comment" class="input" type="text" name="comment" value="Write Your Comment Here">
        <br>
        <br>
        <input type="submit" class="submit" value="SEND MESSAGE">
      </form>
    </div>
  </div>
  <!--about-->
  <!--gallery-->
<!--footer-->
</body>
</html>

*{
  margin: 0;
  padding: 0;
}
.header{
  width: 1700px;
  height: 100px;
  background-color: #07cbc9;
  font-family: "Microsoft YaHei UI";
  overflow: hidden;
  position: sticky;
  top: 0px;
  z-index: 2;

}
.logo{
  height: 100px;
  width: 260px;
  color: #ffffff;
  float: left;
  line-height: 100px;
  position: absolute;
  left: 10%;
  top: 20px;
}
.daohang{
  float: right;
  height: 100px;
  width: auto;
  position: absolute;
  right: 150px;
  line-height: 100px;
  top: -10px;
  color: #ffffff;

}
.daohang ul li{
  font-size: 10px;
  text-align: center;
  list-style: none;
  height: 100px;
  width: 60px;
  float: left;
  line-height: 100px;
  margin-right: 20px;
}
.daohang ul li:hover{
  background-color:#000000 ;
}
.banner{
  width: 100%;
  height: 800px;
  position: relative;
}
.banner .cover{
  width: 1700px;
  height: 800px;
  background: #555555;
  position: absolute;
  top: 0;
  opacity: 0.5;
}
.banner .form{
  position: absolute;
  top: 50%;
  left:50%;
  margin-left: -225px;
  z-index: 1;
}
.input{
  border: #cccccc solid;
  height: 25px;
  width: 450px;
  opacity: 1;
  margin-bottom: 10px;

}
#comment{
  height: 100px;
}
.submit{
  border: #cccccc solid;
  height: 50px;
  width: 100px;
  opacity: 0.5;
  margin-left: 175px;
}

安小圈 2019-01-01

源自：网页布局案例 2-9 作业题

收起

2回答

好帮手慕珊回答被采纳获得+3积分 2019-01-02 10:47:01

你好！关于表单镂空问题，设置.input的背景色为background-color: transparent;

你说的是表单中的字体颜色吗？之前背景就是白色，把上面的背景改了再试试。

祝学习愉快！

收起回答

安小圈提问者 #1

请问comment栏里的write your comment该怎么让它上移呢，我不管怎么移动它都是居中

2019-01-02 11:59:28

好帮手慕珊 2019-01-02 13:10:55

你好！write your comment使用<textarea></area>完成，这个是多行文本框。如下所示：

另外，这里的value可以改成placeholder

祝学习愉快！

收起回答

提问者安小圈 #1

我按照这个改了以后，发现textarea又没有办法设置镂空了，用之前的background-color：transparent;没有用了。另外字体颜色也无法改动

2019-01-02 14:11:39
提问者安小圈 #2

谢谢，已经解决了

2019-01-02 14:16:45