如何在图片上放置背景颜色的文本?

时间:2019-01-30 22:03:39

标签: html css css3

我正在尝试将具有棕色背景色的文本放置在图片上,但是它始终出现在图片下。我将图片和文字放在同一个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>

1 个答案:

答案 0 :(得分:2)

尝试

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