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

Question

我是 html 和 css 的新开发者，我在尝试使用背景图像来适应列表所具有的元素数量并更改其相对于列表项的高度时遇到问题。 我在这里分享一个例子，想法是将列表设置在“菜单”下方，然后 图像的其余部分更改遵循列表中的元素。 谢谢。

<ul>
  <img src="https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Answer 1

您的 html 标记无效，ul 只能包含 li 元素作为直接子元素。

然后为了实现你想要的，你需要在 ul 中设置 background-image

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

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