-1

我有以下代码使用 CSS 在按钮中显示图像，但我无法让它工作。该图像位于 CSS 文件所在的同一目录中。

#submit-go {
  margin-top:1em;
  width:69px;
  height:26px;
  text-indent:-9999px;
  overflow:hidden;
  border:0;
  background:url(submit-button.gif) no-repeat 0 0;
  display:block;
  cursor:pointer !important; cursor:hand;
}

#submit-go:hover {
  background-position:0 -26px;
}


<div align="center"><button type="submit" id="submit-go" >Submit</button></div>
4

2 回答 2

0

可能是因为background仍然是压倒一切background-position的。尝试更改background为：

#submit-go {
  margin-top:1em;
  width:69px;
  height:26px;
  text-indent:-9999px;
  overflow:hidden;
  border:0;
  background-image:url(submit-button.gif);
  background-repeat: no-repeat;
  background-position: 0 0;
  display:block;
  cursor:pointer !important; cursor:hand;
}
于 2013-04-28T14:29:56.413 回答
0

我用您的代码http://jsfiddle.net/rDvTe/1/创建了这个小提琴，并认为它可以在 Chrome 中正确测试）。

我用 URL 替换了图片链接，这样它就可以工作了，还添加了

#submit-go {border: 1px solid red;}

以便更好地查看按钮。

如果我想您希望背景图像显示在悬停时，我是对的吗？否则只需在正常和悬停状态下切换背景位置。希望这就是你要找的。

于 2013-04-28T16:42:56.087 回答