如何将图像与文本重叠答案

【问题标题】：How to over lap an image with text如何将图像与文本重叠
【发布时间】：2016-09-11 11:20:04
【问题描述】：

仍在学习 css 如何与 html 一起工作，我目前正在尝试将图像与文本重叠。这是我到目前为止所拥有的。

<style>
  .aboutus_oven{
    background:url('Images/oventemp.jpg') no-repeat center;
    background-size: 100% 100%;
    height:760px;
    margin-top: 208px;
    position: absolute;
        }
</style>




<div class="aboutus_oven">
    <div class="aboutus_title">
        <h1> About Us</h1>
    </div>
</div>



.aboutus_title{
  margin-top:0px;
  margin-left: 65px;    
  position: relative;
  }

不知道是不是因为他们是同一个班的？我在每个班级中指出的具体利润——它们是否相互矛盾？我附上了一张图片，展示了我想要实现的目标。

【问题讨论】：

只增加标题的margin-top
哦，顺便说一句，最好使用 % 而非像素
你能提供你的jsfiddle吗？

标签： html css image text overlap

【解决方案1】：

看看这个小提琴：https://jsfiddle.net/efnvt8qp/

.aboutus_oven{
    background:url('Images/oventemp.jpg') no-repeat center;
    background-size: 100% 100%;
    height:760px;
    margin-top: 208px;
    position: relative;
 }
.aboutus_title h1 {
  position: absolute;
  width: 100%;
  text-align: center;
  height: 36px;
  top: -18px;
  margin: 0;
}

【讨论】：

【解决方案2】：

您可以尝试在容器中使用填充：

  .aboutus_oven{
    background-color:red;
    background-size: 100% 100%;
    height:760px;
    margin-top: 208px;
    position: absolute;
    padding: 65px;  
    padding-top:380px;
        }

【讨论】：

【解决方案3】：

您的 aboutus_title 样式不在样式标签中。要控制前面或后面的内容，请尝试使用 z-index。示例：

    <!DOCTYPE html>
    
    <html>
    
    <head>

    <style>
    .textontop{
    z-index: 10;
    position: absolute;
    top: 80px;
    right: 200px;
    font-size: 60px;
    }

    .imageonbottom{
    z-index: 1;
    }
    
    body{
    text-align: center;
    }
    </style>

    </head>

    <body>
    <img class="imageonbottom" src="https://images.unsplash.com/photo-1602102317048-2be01617f96c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">

    <p class="textontop">TEXT</p>
    </body> 
    
    </html>

【讨论】：