jquery - 如何根据父元素的宽度使用 CSS/jQuery 在子背景图像上动态重复 x？

我有一个菜单

<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，以匹配父级的宽度)和next (z) pixels 我想要另一个背景图片来重复-x。

我可以通过 CSS 实现吗，还是必须使用 jQuery？任何指示都将非常受欢迎

最佳答案

我不认为这样的 css 是可能的(但我不知道 css3)

但也许你可以在 li 子元素中添加 2 个元素(一个 li 父元素的大小)和一个其余元素的大小，使用 repeat-x 将背景图像放在这些元素上。

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

关于jquery - 如何根据父元素的宽度使用 CSS/jQuery 在子背景图像上动态重复 x？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16739657/