Question

我有以下代码使用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>

Answer 1

可能是因为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;
}

Answer 2

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

我用图片链接替换了图片链接以便它可以使用，并且还添加了

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

更好地看到按钮。

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

使用css添加图像

2 个答案: