使用CSS将图像显示为html表单的背景

时间：2015-12-08 14:15:41

标签： html css

我目前在登录表单中有两个符号，并尝试添加我从Google下载的第三个符号，而另外两个符号是我使用的框架。

当我尝试从Google添加一个时，输入框中没有任何内容。

HTML 

    <input type="email" value="" placeholder="Enter Your Email" id="email" name="email" />

CSS 

.login-block input#email {
background: #fff url('../img/email.png') 3%  no-repeat;
background-size: 6% 130%;
line-height:300%;
max-width:80%;
padding-right:0%;

}

Sign Up Form

CSS与其他两个图像一样，我尝试更改背景大小，填充等但仍然没有图像出现。

有人可以帮忙吗？

修改

为什么这可以使用来自互联网图像的链接，但不能使用我的文件夹directorys中的图像路径？

P.S。我知道密码占位符存在问题。

2 个答案:

答案 0 :(得分：1)

如果你的css中添加一个逗号（在登录块和输入之间），它似乎有用吗？ Jsbin link 

.login-block, input#email {
background: #fff url('../img/email.png') 3%  no-repeat;
background-size: 6% 130%;
line-height:300%;
max-width:80%;
padding-right:0%;
}

修改 我已经重新创建了这个on my site。该页面的代码是：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  .login-block, input#email {
    background: #fff url('image.png') 3%  no-repeat;
    line-height:300%;
    max-width:80%;
    padding-left:4%;
    }
</style>
</head>
<body>
<input type="email" value="" placeholder="Enter Your Email" id="email" name="email" />
</body>
</html>

Edit2 确保您确实可以通过网址访问该图片。即我的网站上的图片可以通过http://nexrem.com/test/test/image.png访问，因为它与html文件位于同一文件夹中。你的似乎是一个升级和文件夹。

答案 1 :(得分：0)

你可以试试这个：

background: #fff url('../img/email.png') 3% center  no-repeat;
相关问题
最新问题