0

メニューがあります

<ul>
<li class="parent"> Dynamic text content 
   <ul> 
       <li class="child"> Dynamic text content1 </li>
       <li class="child"> Dynamic text content2 </li>
   </ul>
</li>
</ul>

現在、li.parent の幅は、内部のテキストに応じて変更できます。li.parent の幅が (y) px だとしましょう。ここで、li.child の幅が (y+z) px だとします。次のようにli.childに背景画像を配置したい：最初の（y）pxは特定の背景画像です（したがって、yピクセルに対して-xを繰り返して、親の幅に一致させたい）および次の (z) ピクセル別の背景画像を x に繰り返します。

CSS でこれを実現できますか、それとも jQuery を使用する必要がありますか? どんな指示でも大歓迎です

4

2 に答える 2

0

jQuery を使用して要素を子要素に追加し、スタイルを設定して効果を得ることができます。

.child-after注:親の幅にも一致するように、追加された要素を配置する必要があります。

このフィドルはあなたを正しい道に導くはずです。

jQuery:

$('.parent').each(function() {
  var $this = $(this);
  var parentWidth = $this.outerWidth();
  var $child = $this.find('.child').eq(0);
  var childWidth = $child.outerWidth();

  $child.append('<span class="child-before"></span>').append('<span class="child-after"></span>');

  $child.find('.child-before').css('width',parentWidth + 'px');    
  $child.find('.child-after').css('width',(childWidth - parentWidth) + 'px');
});

CSS:

.parent { width:40px; background:#e6e6e6; }
.child {
    position: absolute;
    width: 200px;
    height: 100px;
    background: #efefef;
    top:20px;
}

.child-before,
.child-after {
  display:block;
  position: absolute;
  top: 0;
}

.child-before {
  left: 0;
  height: 70px;
  background-image: url(http://placehold.it/5x70);
  background-repeat: repeat;
}

.child-after {
  left: 40px;
  height: 40px;
  background-image: url(http://placehold.it/5x40);
  background-repeat: repeat;
}
于 2013-05-24T16:50:10.377 に答える