0

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

非常感谢！！

4

2 回答 2

1

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

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

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

鲍尔默峰

于 2012-06-16T14:36:57.427 回答
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 */
}
于 2012-06-16T14:35:44.350 回答