Question

我在这里搜索过，似乎无法找到解决方案。如果我使用实际的“图像”对象，并且正确调整图像大小，我知道如何使用jQuery实现鼠标移动，我只是想弄清楚是否有办法用CSS做同样的事情并使用具有后台URL的特定类。

这是我的代码＆amp;的CSS：

.sample #img_id {
  width: 80px;
  height: 80px;
  background: url('sample.gif') left no-repeat top;
}

.sample #img_id:hover {
  width: 80px;
  height: 80px;
  background: url('sample-mouseover.gif') left no-repeat top;
}

然后我的HTML代码：

<div class="sample">
  <div id=img_id></div>
</div>

现在 - 如果图像是200像素乘200像素 - 图像不会调整大小。（即，它会'溢出'）。我期待图像大小调整为80px x 80px。

我也试过这个：

.sample img {
  width: 80px;
  height: 80px;
  background: url('sample.gif') left no-repeat top;
}

.sample img:hover {
  width: 80px;
  height: 80px;
  background: url('sample-mouseover.gif') left no-repeat top;
}

然后我的HTML代码：

<div class="sample">
  <img src=sample.gif>
</div>

但这也不起作用。 “初始”图像被正确“调整大小”（即80 x 80像素） - 但是鼠标悬停时，图像将是200px x 200px（即没有调整大小）。

如何通过CSS将我的样本图像正确调整大小/缩放以适应鼠标上的80x80px？（就像我说的，我通过jQuery想出来，我只是觉得应该有一个简单的CSS解决方案，并且不太确定如何正确调整它的大小）。

谢谢！

Answer 1

可能是语法，它正在处理这个fiddle

Answer 2

background-size属性允许您更改背景图像的尺寸，unless您需要它在IE8和Opera Mini中工作。

css用尺寸交换图像

2 个答案: