如何在透明 div 上设置 html 输入字段透明？答案

【问题标题】：How to set html input field transparent on a transparent div?如何在透明 div 上设置 html 输入字段透明？
【发布时间】：2012-06-28 15:52:09
【问题描述】：

我有一个用 rgba 设置为透明的 div，并希望在该 div 上有一个也有透明背景的输入字段。问题是输入字段背景未呈现透明。如果我在 div 上使用opacity:0.8; 它可以工作，但文本也是透明的，所以我需要rgba。对于透明 div rgba 之外的第二个输入字段有效。

这是我的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Insert title here</title>

<style type="text/css">

.term {
background-color: rgba(0,0,0,0.8);
color: #5fba3d;
width: 200px;
height: 100px;
}

input {
background-color: rgba(0,0,0,0.8);
color: #FFF;
border: none;
}

</style>

</head>

<body>

<div style="background-color:yellow; width:300px;">

   <div class="term">
      Input 1 <input type="text" value="Test" />
   </div>

   <br />

   <input type="text" value="Input 2" />

</div>

</body>
</html>

有什么想法吗？

谢谢！

拿但内尔

【问题讨论】：

标签： css opacity rgba html-input

【解决方案1】：

嘿，Nathaneal，如果我更改 rgba 值，它的工作正常，所以文本不会透明

input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}

希望对你有帮助... 你可以看到演示：- http://jsbin.com/avupaw/16/edit#html,live

【讨论】：

非常感谢。我没有想到将输入字段的背景颜色设置为完全透明 ;-)

【解决方案2】：

或者只是

input {
    background: none;
    color: red;
    border: none;
}

【讨论】：