在鼠标上显示背景图像

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;
}

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

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

请记住，我正在使用响应式设计，因此块在不同的屏幕尺寸上会有不同的大小和宽高比。这就是我使用background-size: cover的原因。这也适用于CMS系统，因此我希望图像和颜色在HTML中内嵌设置，因此可以轻松编辑，并且可以添加更多块。

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

我试过的是：

.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/

因此，对于正常状态，您将看不到背景图像，但会看到背景颜色。在悬停时，您可以移回图像。

Answer 2

不幸的是，不可能使用:hover伪类内联，这使得很难在单个元素上实现内联。

使用附加元素进行样式化通常有点难看，但至少它可以解决手头的问题。

<div style="background-image: url(http://lorempixel.com/400/200);">
   <div class="home-block">Foo</div>
</div>

然后你可以在你的CSS中使用这样的东西：

.home-block:hover {
    background: transparent;
}

Demo

这样，您就可以添加具有单独背景图像的新块，而无需更新样式表。