4

我有以下 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 方法来实现这一点。

4

2 回答 2

6

background-image如果您需要在 HTML中设置内联，这有点棘手。你不能轻易覆盖它。我会尝试做的是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/

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

于 2013-03-17T15:32:18.960 回答
4

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

为造型而使用附加元素通常有点难看，但至少它是解决手头问题的可能方法。

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

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

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

演示

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

于 2013-03-17T15:37:24.413 回答