使用带有输入文本和提交按钮的 CSS3 和 HTML 的图像效果答案

【问题标题】：Image effect using CSS3 & HTML with input text and submit button使用带有输入文本和提交按钮的 CSS3 和 HTML 的图像效果
【发布时间】：2013-11-04 22:18:48
【问题描述】：

我有如下所述的登录屏幕图像：

有没有办法只使用 CSS3 和 HTML5 创建类似的图像？其中“用户名：”和“密码：”之后的下划线是输入类型=“文本”，没有边框（因此用户可以输入文本）

登录是按钮。所有这些字段都放在 HTML 表单中。

【问题讨论】：

标签： html image css html5-canvas gradient

【解决方案1】：

您可以这样设置元素的样式：

#box { /* Container box */
    width:450px;
    padding:50px;
    background:#463; /* set image here */
}
#usr, #pwd { /* input boxes */
    border:none;
    border-bottom:3px solid white;
    background:transparent;
    color:#fff;
    font:bold 24px sans-serif;
}
#box > div { /* container for lines (label + input) */
    margin-bottom:26px;
}
#box > div > label,
#box > button {
    color:#fff;
    font:bold 24px sans-serif;
}
#box > button { /* A simple button */
    background:transparent;
    border:none;
    text-align:center;
    color:#ff0;
    width:100%;
}

一些虚拟的html：

<div id="box">
    <div>
        <label for="usr">Username:</label>
        <input id="usr">
    </div>
    <div>
        <label for="pwd">Password:</label>
        <input id="pwd" type="password">
    </div>
    <button id="login">Login</button>
</div>

Online demo here

只需将板的背景替换为您正在使用的图像，并使用实际字体。

【讨论】：