Question

我在html和css中进行了新的开发，我遇到了一个问题，试图获得一个背景图像的列表，该列表适应列表所具有的元素数量，并相对于列表项更改其高度。我在这里分享一个例子，想法是设置下面的列表＆＃34;菜单＆＃34;和图像更改的其余部分尊重列表中的元素。感谢。

＆＃13;

<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>

＆＃13;

Answer 1

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

然后，为了实现您的目标，您需要在background-image

中设置ul

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>

Answer 2

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

请注意以下代码。您可能希望以整页模式运行它。它将使文本和图像居中。菜单类的top属性将决定文本的顶部距离。

.menuContainer {
  position: relative;
}

.menuContainer img {
 width: 1000px;
 margin: 0 auto;
 display: block;
}

.menu {
  position: absolute;
  width: 100%;
  top: 250px;
  text-align: center;
  list-style: none;
}

<div class="menuContainer">
  <img src="https://st.depositphotos.com/1695098/1207/i/950/depositphotos_12070017-stock-photo-menu-background.jpg">
  <ul class="menu">
    <li>Steak</li>
    <li>Chicken</li>
    <li>Macaroni and Cheese</li>
    <li>Mashed Potatoes</li>
    <li>Chocolate Mousse</li>
  </ul>
</div>

Answer 3

不要忘记样式标签：

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

3 个答案: