css<input> 透明+背景图片？

Question

我设计了一个登录面板（photoshop），它基本上充当背景图像（为用户提供所有必要的信息）。 之后，我决定使透明，然后使用 CSS 规则将对象与背景图像输入相匹配。 好吧，问题是 IE 有一个重大错误，透明性不起作用。 使用 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>

一如既往地感谢大家。

Answer 1

虽然 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;

Answer 2

为什么不直接切出你的田野图像并将它们设置为你的田野背景呢？ 所以你会有类似的东西：

input[type="text"] {
    background: transparent url(textfield.png) no-repeat center center;
    border: none;
}

这样您就不必尝试将图像与图像对齐（这很令人头疼，并且有点错过了现代开发的重点）。

Answer 3

在<input>:

小提琴

input[type=text].img {
    background-image: url(http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png);
    border: 1px solid #aaa;
    padding: 5px;
    padding-left: 20px;
    background-size: 10px 15px;
    background-repeat: no-repeat;
    background-position: 8px 6px;
    background:transparent;
}