CSS - 带有图像填充列其余部分的标题标记

Question

希望 Stackoverflow 的好心人今天能帮助我 - 我昨晚看足球时喝了太多啤酒，我的大脑停止工作了。

我正在做一个响应式主题，3 列布局，每列顶部都有 H2 标签。我需要一个背景图像来填充列中的剩余空间。我在下面模拟了一张图片来展示我的意思；

如果背景是 block 色，我可能会内联显示 H2 并将背景色也应用到它，在包含的 div 上遮挡它后面的图像。

不过如您所见，斑驳的背景意味着该技术效果不佳，请注意文本上方明显的线条；

我一直在尝试各种方法 - 一定有一些聪明的方法可以做到这一点，我希望你能帮助我!

感谢阅读!

罗比。

编辑 好吧，最后我使用了下面两个答案的组合，但接受了将标题标签分成两个 div 并将第一个向左浮动的答案(我没有想到的)。它自己不起作用，但是通过给左侧 float 的 div 一个与双线高度相同的背景并将其平铺在 x 轴上(而不是给整个元素背景)，我能够掩盖文本下方的线条与背景不冲突。

图片:

HTML:

<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines">&nbsp;</div>
</h2>

和 CSS；

.h2-text {
   padding-right: 5px;
   background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
   float: left;
}

.h2-lines{
   background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}

非常感谢!!

Answer 1

我明白了，超越了鲍尔默峰。

无论如何，一种可能的解决方案是使用 float 元素:

<h2>
    <div style="float: left;">My Header Tag</div>
    <div style="background: whatever;">&nbsp;</div>
</h2>