Html 使文本输入框透明？应该很简单吧？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20573549/
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
Make Text Input Box Transparent? Should be simple?
提问by HoustonGuy
I'm trying to make my form input transparent and over lay it on top of my div. Basically I want the text field to be transparent to whatever is behind it. Any suggestions?
我正在尝试使我的表单输入透明并将其放在我的 div 之上。基本上我希望文本字段对其背后的任何内容都是透明的。有什么建议？
<head>
<style type="text/css">
.WRAPPER {
background-color: #000;
height: 575px;
width: 975px;
background-image: url(exit-gate/exit-gate-bg.png);
top: auto;
margin: -8px;
}
body {
background-color: #000;
}
</style>
<style type="text/css">
term {
background: transparent;
border: none;
}
</style>
</head>
<body>
<div id="WRAPPER">
<div class="term"><input name="email" type="text" id="email">
<form name="form1" method="post" action="insert_ac.php">
<input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
</form>
</div>
</div>
</body>
</html>
</div>
回答by Hiral
Try:
尝试：
#email {
background-color:rgba(0, 0, 0, 0);
color:white;
border: none;
outline:none;
height:30px;
transition:height 1s;
-webkit-transition:height 1s;
}
#email:focus {
height:50px;
font-size:16px;
}
回答by L.Kelemen
this looks ways too simple but it worked for me:
这看起来太简单了，但对我有用：
<input type="text" id="SI"/>
this is my input field, I gave it an ID(SI), then in my CSS:
这是我的输入字段，我给了它一个 ID(SI)，然后在我的 CSS 中：
#SI{
background-color:transparent;
}
added the transparency to the element with SI id; the background became visible.
为具有 SI id 的元素添加透明度；背景变得可见。
回答by Odin
<style type="text/css">
input {
background-color : white;
border-color: transparent;
}
</style><input type="text" />