CSS 如何在透明 div 上设置 html 输入字段透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11222416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set html input field transparent on a transparent div?
提问by Nathanael
I have a div set transparent with rgba and want on that div an input field which also has a transparent background. The problem is that the input field background is not rendered transparent.
It works if I use opacity:0.8;on the div but than also the text is transparent, so I need rgba.
For the second input field which is outside of the transparent div rgbaworks.
我有一个使用 rgba 设置透明的 div，并希望在该 div 上有一个也具有透明背景的输入字段。问题是输入字段背景没有呈现透明。如果我opacity:0.8;在 div 上使用它会起作用，但文本也是透明的，所以我需要rgba. 对于透明 div 之外的第二个输入字段rgba。
Here my example code:
这是我的示例代码：
<!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>
Any ideas?
有任何想法吗？
Thanks!
谢谢！
Nathanael
拿但业
回答by Shailender Arora
Hey Nathaneal its working fine if i chang the rgba value so text is not going to transparent
嘿 Nathaneal，如果我更改 rgba 值，它的工作正常，因此文本不会透明
input {
background-color: rgba(0,0,0,0.1);
color: red;
border: none;
}
i hope this will help you... you can see the demo :- http://jsbin.com/avupaw/16/edit#html,live
我希望这会帮助你......你可以看到演示：- http://jsbin.com/avupaw/16/edit#html,live
回答by tandrewnichols
Or just
要不就
input {
background: none;
color: red;
border: none;
}
