如何用文字重叠图像

Question

仍在学习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; 
    } 

我不知道是不是因为它们都属于同一类？我在每个班级中指出的具体利润率 - 他们是否相互对立？我包括一张图片，显示我想要达到的目标。

Answer 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; 
} 

Answer 2

您可以通过在你的容器使用填充尝试：

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