CSS <input>прозрачный + фоновое изображение?

Question

Я разработал панель входа в систему (фотошоп), которая в основном действует как фоновое изображение (предоставляет всю информацию, необходимую пользователю). После этого я решил сделать прозрачным, а после этого использовать 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>:

FIDDLE

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;
}