0

我在一个网站上工作，我遇到了一个小难题......

我有一个 h3 标签，需要在两边重复背景..这有点难以解释，所以我做了这个图形......

在此处输入图像描述

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

4

4 回答 4

2

:before和的例子:after

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

于 2013-01-20T00:50:08.920 回答
0

我认为您可能需要在 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;
}
于 2013-01-20T00:29:11.547 回答
0

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

请参阅演示。

于 2013-01-20T00:48:05.530 回答
0

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

<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>
于 2013-01-20T01:03:03.047 回答