css - 在鼠标悬停时显示背景图像

Question

我有以下 HTML:

<a href="#" class="home-block" style="background-color:#464646; background-image:url('wardrobe.jpg')">Wardrobe</a>
<a href="#" class="home-block" style="background-color:#6a0d1f; background-image:url('wine.jpg')">Wine</a>
<a href="#" class="home-block" style="background-color:#291407; background-image:url('coffee.jpg')">Coffee</a>

这是相关的 CSS:

.home-block {
    background-color: #c2b89c; display: block; height: 180px; line-height:180px;
    text-align: center; font-size: 70px; color:#e2e2e2;
    text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
    background-position: center center; box-shadow: 1px 1px 4px #111;
}

我的结果现在看起来像这样:

没关系，但我真正想要的是 block 具有纯色，并且只在悬停时显示图像。像这样:

请记住，我使用的是响应式设计，因此 block 在不同的屏幕尺寸上会有不同的尺寸和纵横比。这就是我使用 background-size: cover 的原因。这也是针对 CMS 系统的，所以我希望在 HTML 中内联设置图像和颜色，这样它就可以很容易地进行编辑，并且可以添加更多的 block 。

所以我基本上需要一个没有绝对定位元素的干净解决方案(因为如果没有固定宽度，它们往往会中断)来实现这一点。

我试过的是这样的:

.home-block { background: none; }
.home-block:hover { background: inherit }

但没有成功。我正打算用几行 jQuery 来解决所有这些问题，但我很快就想检查一下是否没有纯 CSS 方法来实现这一点。

Answer 1

如果您需要在 HTML 中内联设置 background-image，这会有点棘手。你不能轻易覆盖它。我想做的是在悬停时更改 background-position:

.home-block {
    ...
    background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
    background-position: center center !important; // make it visible
}

http://jsfiddle.net/h2Jbg/

因此对于正常状态，您不会看到背景图像，但会看到背景颜色。悬停时将图像向后移动。