イメージを部分的にイメージの上に重ねる方法は？

Question

テキストを部分的にイメージの上に重ねる方法を知りたいと思います。

→ hereです。 （私は私が望むものを青で囲んだている！）

私はGoogleでこので検索しましたが、私は受け取った唯一の結果は、私が探しています何をされていない、Image Captionsました。

ご協力いただきますようお願い申し上げます。

Answer 1

あなたのテキスト要素にを使用して、それを左にある値だけオフセットしてください。

コード：

h1 { 
    position: relative; 
    top: 50%; 
    right: 6%; 
} 

jsFiddle： → here。

例：

#wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
#parent { 
 
    width: 550px; 
 
    height: 343px; 
 
    background-image: 
 
    url(https://media-cdn.tripadvisor.com/media/photo-s/08/73/aa/76/trolltunga.jpg); 
 
    background-size: contain; 
 
} 
 
#child { 
 
    position: relative; 
 
    top: 50%; 
 
    right: 6%; 
 
}

<div id="wrapper"> 
 
    <div id="parent"> 
 
    <h1 id="child">A Fantastic Title<br/>&rarr;</h1> 
 
    </div> 
 
</div>