Question

User login

我设计了一个登录面板（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>:

中添加图片

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

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

3 个答案: