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

css <input> transparent + background image?

提问by obinoob

I've designed a login panel (photoshop) which basically acts as a background image (provides all the information necessary to the user). After that I decide to make transparent and , after that used CSS rules to match the objects with background image inputs. Well, the problem is that IE has a major bug and transparency won't work. With firefox, chrome, opera and safari transparency works but some of the input boxes move a bit from browser to browser! Anyway, I wonder if there is a proper way of doing this?

我设计了一个登录面板（photoshop），它基本上充当背景图像（提供用户所需的所有信息）。之后，我决定使透明，然后使用 CSS 规则将对象与背景图像输入相匹配。嗯，问题是 IE 有一个重大错误，透明度不起作用。使用 firefox、chrome、opera 和 safari 透明度工作，但一些输入框在浏览器之间移动一点！无论如何，我想知道是否有适当的方法来做到这一点？

My code:

我的代码：

CSS rules:

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:

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>

Thank you all as always.

一如既往地谢谢大家。

回答by Blender

While the CSS3 opacityshouldwork, it's not supported by IE.

虽然 CSS3opacity应该可以工作，但 IE 不支持它。

Here's what you need to include transparency which works with virtually any browser. Some of these rules are ancient, so feel free to omit the ones you feel are vestigial:

这是包含几乎适用于任何浏览器的透明度所需的内容。其中一些规则是古老的，因此请随意省略您认为遗留的规则：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

回答by Shauna

Why not just slice out your field images and set them as the background of your fields? So you'd have something like:

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

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

That way you don't have to try lining things up with a image (which is a headache and kind of misses the point of modern development).

这样你就不必尝试用图像排列东西（这是一个令人头疼的问题，并且有点错过了现代开发的重点）。

回答by vishalkin

Adding an image in the <input>:

在图片中添加图片 <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;
}