使用css显示图像

Question

我正在尝试使用css显示图像。但它无论如何都不显示。请帮我。我的代码是：

//styles.css

table tr td span.glyphicon-eye-open{
	background: url("../images/private-eye.png") no-repeat;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"></span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

我也包括在内 'link rel =“stylesheet”href =“../ css / styles.css”type =“text / css”/' 带标签的头部

Answer 1

那是因为你的跨度根本没有高度。每个跨度都没有高度，直到您在其中插入一些文本或通过CSS编辑其高度。例如，我在这里放了一些文字，如下：

span.glyphicon-eye-open {
    background: url("http://beerhold.it/320/200") no-repeat;
    color: #fff;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">@@@</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

Answer 2

更改此行

<span class="glyphicon-eye-open"></span>

为：

<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 

<强>样本

span.glyphicon-eye-open {
	background: url("http://previews.123rf.com/images/arnau2098/arnau20981503/arnau2098150300166/37873708-small-squares-background-color-Stock-Photo.jpg") no-repeat;
}

//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

Answer 3

现在可以使用以下css代码正常工作：

table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
/*width:50px;
height:50px;*/
padding-left:15px;
padding-right:15px;
padding-bottom:2px;

}

Answer 4

尝试这个

.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
}

确保您的css已包含在内