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

Question

我需要将一个菜单附加到图像的底部，但不要在图像之外我使用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>

Answer 1

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

将代码包含在一个div中，并将position设置为relative，而不是设置为ul代码position absolute bottom 0;

希望它有所帮助...

＆＃13;

＆＃13;

* {
  margin: 0;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;