为什么图像不显示在 MVC 4 中的 CSS 文本框的角落？答案

【问题标题】：Why image not displaying in corner of textbox by CSS in MVC 4?为什么图像不显示在 MVC 4 中的 CSS 文本框的角落？
【发布时间】：2014-01-25 01:57:09
【问题描述】：

我创建了一个 ASP.NET MVC 4 项目。我想在 this tutorial 这样的文本框中显示图像，但图像不显示在文本框中。

CSS：

.searchText {
  background:#FFFFFF url(Images/search.png) no-repeat 4px 4px;
  padding:4px 4px 4px 22px;
  border:1px solid #CCCCCC;
  width:230px;
  height:18px;
}

查看：

 <input type="text" class="searchText" />

【问题讨论】：

检查你的url路径是否正确？这里jsfiddle.net/53YmR 对我来说似乎工作正常..
这对我来说似乎也很好......
我建议您使用浏览器的开发工具检查 CSS 类（我个人的偏好是 FireBug），并查看图像是否实际上正在加载到浏览器中。您还可以直接在浏览器中操作您的 CSS 以查看哪些有效，哪些无效。

标签： c# html asp.net css asp.net-mvc-4

【解决方案1】：

在图片前添加正斜杠 /。

替换这个：

url(Images/search.png)

与：

url('/Images/search.png')

【讨论】：

然后检查你的图片尺寸，图片尺寸可能会很大。
好的，试试这个：- background:#FFFFFF url('http://www.cssportal.com/form-elements/images/search.png') no-repeat 4px 4px;