Question

我正在为我的网站创建一个登录页面，我希望我的两个文本字段显得透明，占位符为白色。这是我的意思的图片

我一直在寻找，并且找不到类似于文本字段设计的东西。我相信它与此代码有关

background: rgba(0, 0, 0, 0.5);

但我不确定。如果有人知道这个人如何实现这一点，请帮助。这也不是一个网站所以我不能使用检查元素，这是我在谷歌上发现的img。

Answer 1

尝试这样的事情：

＆＃13;

body {
  background-color: black;
}
.text-field {
  background-color: rgba(255, 255, 255, 0.25);
  border: none;
  padding: 5px 20px;
  color: white;
}

＆＃13;

<input type='text' class='text-field' placeholder='Your full name' />

＆＃13;

Answer 2

＆＃13;

body {
  background-color: #250aba;
}

.field {
  background-color: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 7px 22px;
  color: white;
  margin-top: 4px;
  margin-bottom: 4px;
}

.go {
  background-color: rgba(220, 220, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 10px 27px;
  margin: 5px;
  width: 35%;
  color: green;
}

＆＃13;

<form>
  <div>
    <input type="text" class="field" name="username" placeholder="Username" /><br />
    <input type="password" class="field" name="psw" placeholder="Password" /><br />
    <button class="go">Login</button>
  </div>
</form>

＆＃13;

这应该看起来不错。背景是靛蓝，文本字段，因为它们的alpha（rgba中的＆＃34; a＆＃34;）是透明的黑色。注意字段看起来是浅紫色。

Answer 3

尝试以下

<!DOCTYPE html>
<html>
<head>
<style>

input {
background-color:rgba(0, 0, 0, .1);
color: white;
}
</style>
</head>
<body>

<form>
  <input type="text" name="firstname" value=" First name"><br/>
  <br/><br/><br/>
  <input type="text" name="lastname" value="Last name">
</form>

</body>
</html>

在css中获取透明的文本字段

3 个答案: