我设计了一个登录面板(photoshop),它基本上充当背景图像(提供用户所需的所有信息)。之后我决定将 和 设为透明,然后使用 CSS 规则将对象与背景图像输入进行匹配。嗯,问题是 IE 有一个重大 bug,透明性不起作用。对于 firefox、chrome、opera 和 safari,透明度可以工作,但某些输入框在不同浏览器之间移动了一些!不管怎样,我想知道是否有正确的方法来做到这一点?
我的代码:
CSS 规则:
.box {
position: absolute;
top: 40%;
left: 38%;
border: none;
}
.box fieldset {
display:block;
border-style: none;
}
.box input[type="text"], input[type="password"] {
padding: 0px 5px 0px 5px;
border-style: none;
border-color: transparent;
background-color: transparent;
font-size:12px;
}
.box input[type="submit"] {
filter:alpha(opacity=100);
cursor: hand;
border: 2px solid #FFFFFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-decoration:none;
font-size:14px;
font-weight:bold;
height: 35px;
width: 80px;
color: white;
background-color: #3E3E3E;
}
.box input[type="submit"]:hover{
color: #3E3E3E;
background-color: #CFC8C8;
border: 2px solid #000000;
}
html:
<div id="someid">
<div class="box" id="login" style="width: 326px; height: 228px; background-image: url('images/loginBox.png');">
<form name="login" action="" method="post">
<fieldset>
<input name="username" type="text" style="position:inherit; margin-top: 100px; margin-left:170px; width: 100px; color: white;" />
<input name="password" type="password" style="position: relative; margin-top: 19px; margin-left:170px; width: 100px; color: white;" />
<input type="submit" value="Login" style="position: relative; margin-top: 17px; margin-left:5px;" />
</fieldset>
</form>
</div>
<div class="box" id="register" style="width: 326px; height: 300px; background-image: url('images/registerBox.png');">
<form name="register" action="" method="post">
<fieldset>
<input name="username" type="text" style="position:inherit; margin-top: 8.4em; margin-left:170px; width: 100px; color: white;" />
<input name="password" type="password" style="position: relative; margin-top: 1.9em; margin-left:170px; width: 100px; color: white;" />
<input name="mail" type="text" style="position: relative; margin-top: 1.6em; margin-left:170px; width: 100px; color: white;" />
<input name="name" type="text" style="position: relative; margin-top: 1.8em; margin-left:170px; width: 100px; color: white;" />
<input type="submit" value="Registar" style="position: relative; margin-top: 1.2em; margin-left:5px;"/>
</fieldset>
</form>
</div>
</div>
一如既往地感谢大家。
最佳答案
虽然 CSS3 opacity
应该起作用,但 IE 不支持它。
以下是您需要包含的透明度,它几乎适用于任何浏览器。其中一些规则是古老的,因此请随意忽略您认为已经过时的规则:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
关于javascript - css <input> 透明+背景图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6346372/