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

我认为css不可能像那样（但我不知道css3）

但是也许您可以在 li 子项中添加 2 个元素（其中一个 li 父项的大小）和其余的一个大小，然后使用 repeat-x 将背景图像放在这些元素上。

您可能需要 javascript 将宽度设置为第一个元素，该元素应该与 li 父元素相同

于 2013-05-24T16:35:27.587 回答
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 回答