0

在一个搜索按钮上，我创建了一个背景图像，它只在 firefox 中显示，而不在其他浏览器中显示（选中 Chrome、IE 和 Opera）。

这是我的 HTML（由 Joomla 生成）：

<input class="button" type="image" onclick="this.form.searchword.focus();" src="/dev/" value="Search">

这是我的CSS：

#search .search .button{
    background: #1B3F8B url('../images/search_btn.png') no-repeat center center;
    border:1px solid #1B3F8B;
    width:22px;
    height:32px;
    float:right;
}

我的图像是 RGB .png

奇怪的是，我看到它在 Google Chrome 中加载，但半秒后它消失了，并显示了常规的“图像未加载”图像。

我似乎找不到这个问题的任何答案，任何人都有这个问题的经验或知道我做错了什么？

4

2 回答 2

2

您需要更改type="image"为type="button". 由于背景图像在 css 类中，您也可以src从 HTML 标记中删除 。

标记看起来像：

<input class="button" type="button" onclick="this.form.searchword.focus();" value="Search">

您还需要更新 CSS 以添加逗号：

#search, .search, .button{
于 2013-11-01T19:54:46.750 回答
1

您需要用逗号分隔 CSS 中的选择器。我认为你仍然需要删除src="/dev/"。

#search, .search, .button {
    background : url('../images/search_btn.png') center center no-repeat #1B3F8B;
    border : #1B3F8B solid 1px;
    width : 22px;
    height : 32px;
    float : right;
}

http://jsfiddle.net/M5BaR/1/

于 2013-11-01T20:22:32.913 回答