如何用文字重疊圖像

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