html - 如何制作半透明的<input/>和透明的？

Question

我正在尝试实现以下目标，一个半透明的输入文本字段和一个透明的按钮:

所以对于 <input/>尝试过但似乎无法完全相同。关于改进什么以使其完全相同的任何指导或见解？ (例如文本光标颜色和占位符大小等)。也求助<button/>也将不胜感激。

   #input-field {
    background-color: rgba(255,255,255,0.4);
    border-radius: 5px;
    width: 100px;
    height: 40px;
    padding: 5px;
  }

Answer 1

希望对你有帮助

你只需要将 background-color 设置为 rgba(255,255,255,0.4) .. 你将不得不使用 % .. 即更改 0.4、0.3 等，对于按钮，您可以将 background 设置为 transparent

* { margin: 0; padding: 0; box-sizing : border-box; }

body {
  max-width: 400px;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
}


.container {
  padding: 50px;

  background: rgb(121,68,160);
  background: -moz-linear-gradient(left, rgba(121,68,160,1) 0%, rgba(86,93,181,1) 100%);
  background: -webkit-linear-gradient(left, rgba(121,68,160,1) 0%,rgba(86,93,181,1) 100%);
  background: linear-gradient(to right, rgba(121,68,160,1) 0%,rgba(86,93,181,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7944a0', endColorstr='#565db5',GradientType=1 );

}

h1 { margin-bottom: 15px; color: #EEE; }
.input { margin-bottom: 10px; }
.input:last-child { margin-bottom: 0; }

input, button {
  font-size: 16px;
  border: none;
  width: 100%;
  outline: 0;
  font-family: 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif;
  padding: 10px 14px;
  border-radius: 7px;
  color: #FFF;
  cursor: pointer;
}

input {
  background: rgba(255,255,255,0.2);
}

button {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.45);
  font-weight: bold;
}





::-webkit-input-placeholder {
   color: #DDD;
}
::-moz-placeholder {
   color: #DDD;  
}

<div class="container">
<h1>User Login</h1>

<form action="#">

	<div class="input">
		<input type="text" placeholder="Username">
	</div>
	<div class="input">
		<input type="password" placeholder="Password">
	</div>

	<div class="input" style="margin-top: 20px;">
		<button>Login</button>
	</div>

</form>
</div>