显示背景图片在

我有如下因素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; 
}

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

enter image description here

这是确定的，但我真正想要的是块有一个坚实的颜色，并且只显示我法师在悬停。像这样：

enter image description here

请记住，我使用的是响应式设计，这样的块具有不同的屏幕尺寸不同的尺寸和长宽比。这就是为什么我使用background-size: cover。这也适用于CMS系统，所以我希望图像和颜色可以在HTML中内联设置，因此它可以很容易编辑，并且可以添加更多的块。

所以我基本上需要无绝对定位的元素一个干净的解决方案（因为他们往往打破，如果没有固定的宽度），以实现这一目标。

我曾尝试是这样的：

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

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

来源

2013-03-17 Jules Colle

您正在寻找这样的事情？ http://jsfiddle.net/ExplosionPIlls/R7anj/ – 2013-03-17 15:24:05

是的，这是所需的结果。但正如我所提到的那样，对于我而言，背景设置在home-block中是非常重要的，所以每次我的客户想要在主页上添加一个新块时，样式表都不需要更新。 – 2013-03-17 15:27:34

更新样式表和html内联之间有什么区别？ – 2013-03-17 15:29:21

这是一个有点棘手，如果你需要在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/

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

来源

2013-03-17 15:32:18 dfsq

这么简单明显！正是我在找什么。感谢这个非常干净的解决方案。 :) – 2013-03-17 15:39:30

不幸的是这是不可能使用: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

这样，您就可以添加与个人背景图像的新块，而不更新样式表。

来源

2013-03-17 15:37:24

非常好的和巧妙的解决方案。但我认为dfsq的解决方案只是一点点清洁。你应该得到一个赞扬！ – 2013-03-17 15:41:39

+1非常聪明的解决方案。 – dfsq 2013-03-17 15:43:06

@dfsq看到你的解决方案，我会为你的。 :)非常聪明，不需要我的解决方案需要的附加元素。 – 2013-03-17 15:45:47

显示背景图片在

回答

相关问题