重复缠绕在H3标签周围的图像

Question

我正在网站上工作，我遇到了一个小困境......

我有一个h3标签，需要在两侧都有重复的背景......这有点难以解释，所以我制作了这个图片......

基本上它的标题背面有重复的背景，但背景停在标题开始的地方然后继续......我玩了大量的CSS但没有运气......有什么想法吗？

Answer 1

:before和:after

的示例

http://jsfiddle.net/JTN2U/ - 品尝季节

Answer 2

我认为您可能需要在h3中添加另一个标签，如下所示：

<h3><span class="text">title goes here</span></h3>

CSS：

h3 {
  background: url('img.jpg') repeat-x;
  padding: 0 20px; /* or however much of the image you want to show */
}

h3 .text {
  background: #fff; /* or whatever background color */
}

<强>更新 HTML：

<h3><span class="pre"></span><span class="text">title goes here</span><span class="post"></span></h3>

CSS：

h3 span.pre,
h3 span.post {
  background: url('header-bg.jpg') repeat-x;
  display: block;
  width: 20px;
  float: left;
}

h3 span.text {
  float: left;
  display: block;
}

Answer 3

将repeat-x背景添加到h3，然后您可以在里面添加span标记。还有很多其他方法可以做到这一点。

See the demo.

Answer 4

我不知道这是否是一个合适的解决方案，因为它不是一个单一的标签......

<style type="text/css">
  div {background-image: url('navlolite.gif'); text-align: center;}
  label {background-color: #FFFFFF; padding-left: 24px; padding-right: 24px;}
</style>

<div>
  <label>My Headng Text</label>
</div>