2

私はWordpressのテンプレートに取り組んでいます。<li>動的に生成されるナビゲーション メニューでそれぞれに使用される 3 つの背景画像を実装しようとしています。2 つの例を見てみましょう。

http://preahkumpii.com/misc/test01/hi.html
http://preahkumpii.com/misc/test02/hi.html

最初の CSS の例:

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

2 番目の CSS の例:

.menu-item li {
  background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
  background-position: left, right, center;
  background-repeat: no-repeat, no-repeat, repeat-x;
}

HTML:

<ul class="menu-item">
  <li>ItemNumber1</li>
  <li>ItemNumber2</li>
  <li>ItemNumber3</li>
</ul>

外側の 2 つの bg 画像を、繰り返しのない場所にとどめたいと思います。しかし、中央の bg 画像を x 軸に沿って繰り返したいのですが、他の bg 画像にのみ拡張します。2 番目の例でわかるように、中央の画像を指定repeat-xすると、全体に広がります<li>。私の知る限り<div>、メニューのテキストはその場で生成されるため、これを実現するために使用することはできません。ですから、たくさんのs がぶらぶらしていなくても、 aだけが必要だと思います。何か助けはありますか？<ul><div>

4

1 に答える 1

3

after-before 疑似クラスを使用して、目的の結果を得ることができます。

私が作ったCSSを見てください:-

CSS

.menu-item li:after {
    background: url("images/menu-center.png") repeat-x scroll 0 0 transparent;
    bottom: 0;
    content: " ";
    left: 20px;
    position: absolute;
    right: 20px;
    top: 0;
    z-index: -1;
}
.menu-item li {
    background-image: url("images/menu-left.png"), url("images/menu-right.png");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    display: inline-block;
    height: 56px;
    line-height: 56px;
    min-width: 60px;
    padding: 0 20px;
    position: relative;
    text-align: center;
    z-index: 1;
}

私がそれを行った方法の出力を参照してくださいここに画像の説明を入力

于 2012-11-20T06:53:48.277 に答える