Javascript 具有可扩展图像背景的列表

我是html和css的新开发人员，我在尝试实现一个带有背景图像的列表时遇到了一个问题，背景图像适应列表中元素的数量，并改变其相对于列表项的高度。 我在这里分享一个例子，想法是在“菜单”下面设置列表，然后 图像的其余部分将根据列表中的元素进行更改。 谢谢

一,
二,
三,
四,
五,

您的html标记无效，

ul

只能包含

li

元素作为直接子元素

然后，为了达到您想要的效果，您需要在

ul

ul{
背景图片：url(https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg)
}

一,
二,
三,
四,
五,

我认为，为了实现您所寻找的结果，您需要将图像和内部放置在一个具有相对位置的div中。然后将图像作为定义div大小的主要元素，并将其绝对定位在所需的位置

请遵守下面的代码。您可能希望以整页模式运行它。它将使文本和图像居中。menu类上的top属性将指示文本距离顶部的距离

.menuContainer{
位置：相对位置；
}
.menuContainer img{
宽度：1000px；
保证金：0自动；
显示：块；
}
.菜单{
位置：绝对位置；
宽度：100%；
顶部：250px；
文本对齐：居中；
列表样式：无；
}

牛排
鸡
通心粉和奶酪
土豆泥
巧克力慕斯

别忘了样式标签：

<style>
ul {
background-image: url(https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg)
}
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

保险商实验室{
背景图片：url(https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg)
}

一,
二,
三,
四,
五,

为什么不使用背景图像？如果“边框”是固定的（即，您不希望它们拉伸），也可以使用

边框图像。你不能只是把一个
放在那里，然后期待最好的结果……首先，它是无效的HTML。