将菜单放在图像底部（内部图像）

【问题标题】：put menu at the bottom of an image (inside image)将菜单放在图像底部（内部图像）
【发布时间】：2018-11-06 12:25:33
【问题描述】：

我需要将一个菜单附加到图像的底部，但不是在图像之外我使用 HTML，CSS 和 bootstrap 4，我对 CSS 知之甚少，希望你能帮助我。

我有类似的东西（导航栏在图像下方但在外面）

我需要这样的东西（图片底部的菜单）

我有这个代码

<img src="car.png">
        <ul>
                <li>
                    <a> HOME</a>
                </li>

                <li>
                    <a href="#contact">NEWS</a>
                </li>
                <li>
                    <a href="#about">CONTACT</a>
                </li>
            </ul>

【问题讨论】：

我们无法做任何事情，除非您为我们提供一些东西，例如您迄今为止工作过的代码，然后我们可以更新该代码，它将对您有用。
没有minimal reproducible example 就无法提供帮助。没有人可以帮助仅从图像修复 html 结构或 css

标签： html css angularjs bootstrap-4

【解决方案1】：

根据您的描述，我认为您想要这样的东西。

将您的代码包装在一个 div 中并将position 设置为relative，而不是设置为您的ul 标签position absolute 和bottom 0；

希望对你有帮助...

* {
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
}
.parent{
  position:relative;
}

ul {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: gray;
  color: white;
}

<div class="parent">
  <img src="http://1.bp.blogspot.com/-CGiYA8pN7HM/T_bKK0hOrpI/AAAAAAAACVQ/-ws96c-wkB8/s1600/audi-r8-v12-tdi-concept-2008-797153.jpg">
<ul>
  <li>
    <a> HOME</a>
  </li>

  <li>
    <a href="#contact">NEWS</a>
  </li>
  <li>
    <a href="#about">CONTACT</a>
  </li>
</ul>
</div>

【讨论】：