html - 如何在图片上放置带有背景色的文字？

Question

我试图将带有棕色背景颜色的文本放在图片上，但它总是出现在图片下方。我把图片和文字都放在了同一个div里还是什么都没有

https://jsfiddle.net/Gsimelus92/5xp3sr96/

<section class="part-a">
   <div class="container">
      <img src="pizza.jpg" width="1550" height="1000" alt="pizza">
      <div class="container-text">
         <h1>Our Food</h1>
         <h2>Take a look</h2>
         <p>We do all naturel flavors and spices</p>
         <button>Show me the menu</button>
         <button>Boot a Table</button>
      </div>
   </div>
</section>

Answer 1

试试这个

.container-text{
    position: absolute;;
    background-color: #AA8A45;
    color:white;
    bottom:0;
    left:0;
}