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追加すると、内部にスパンタグを追加できます。これを行う方法は他にもたくさんあります。

デモをご覧ください。

于 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 に答える