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

Question

希望今天Stackoverflow的优秀人员可以帮助我 - 昨晚我基本上喝了太多啤酒看足球，我的大脑已经停止工作了。

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

如果背景是块颜色，我可能会显示H2内联并同时应用背景颜色，在包含的div上阻挡其背后的图像。

正如你所看到的，斑驳的背景意味着技术不能很好地工作，请注意文本上方的明显线条;

我一直在尝试各种各样 - 必须有一些聪明的方法来做到这一点，我希望你能帮助我！

感谢阅读！

罗比。

编辑好的，最后我使用了以下两个答案的组合，但是接受了将标题标记分成两个div并将第一个左边浮动的答案（因为我没想到）那个）。它本身并不起作用，但是通过给左浮动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

使用以下结构可以完成一个简单的解决方案：

<h1><div><span>The text</span></div></h1>

添加此款式

h1 {
   background: url('the-noise-background'); 
}

h1 div {
   background-image: url('the-double-lined-background');
}

h1 div span {
   padding-right: 20px;
   display: inline-block;
   background: url('the-noise-background') -20px -10px /* Fine tune those pixels so it matches the original position */;
   /* use required line-height and other stuff to full cover the lines */
}

Answer 2

我看到了鲍尔默峰的俯冲。

无论如何，一种可能的解决方案是使用浮动元素：

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