テキストをオーバーレイしたオーバーレイテキスト？

Question

センタリングされたイメージの上にテキストをオーバーレイしたい。ユーザーが幅を変更した場合、それは動作しません。しかし

<div class="IntroIllustration"> 
    <img src="images/illustration.png"/> 

    <h2 class="Illustration_attention">header above the image</h2> 
    <div class="Illustration_tricky">an overlayed text</div> 
    <div class="Illustration_answered">another overlayed text</div> 
</div> 

次のアプローチは非常にハック感じているが、ウィンドウのサイズが固定されたときに動作します。ここでは

$Illustrationwidth: 509px; 

.Illustration { 
    position: relative; 
    text-align: center; 
    margin-top: 60px; 

    &_tricky { 
    position: absolute; 
    text-align: left; 
    top: 24px; 
    left: 290px; 
    width: 300px; 
    } 

    &_answered { 
    position: absolute; 
    text-align: left; 
    top: 73px; 
    left: 290px; 
    width: 300px; 
    } 

    &_attention { 
    position: absolute; 
    text-align: left; 
    top: -30px; 
    left: 96px; 
    } 
} 

は、私が使用していますHTMLです窓。

ウィンドウが幅を変更できる場合でもこの作業を行うことはできますか？このソリューションは、IE 10+と最新の2つのバージョンのChromeで動作する必要があります。

また、私を教育し、私は

Answer 1

UPDATE :-) CSSでよくなる助けてください。私は今、あなたのコードを参照してください。あなたが何をしているのかをよりよく理解できるように、いくつかの背景色とフォントサイズを追加しました。

pxの代わりに％とfont-size vwを使用すると、すべてが応答的に縮小されます。

#Illustration { 
    position: relative; 
    max-width: 509px; 
    margin: 0 auto; 
} 
.Illustration_attention { 
    font-size: 4vw; 
    font-family: 'Roboto Slab', Rockwell, Serif; 
    font-weight: bold; 
    color: #000; 
    text-align: center; 
} 
.Illustration_tricky { 
    position: absolute; 
    background: green; 
    text-align: center; 
    margin-top: 10%; 
    left: 10%; 
    font-size: 3vw; 
} 
.Illustration_answered { 
    position: absolute; 
    background: white; 
    text-align: center; 
    margin-top: 30%; 
    left: 20%; 
    font-size: 2vw; 
} 
.Illustration img { 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: auto; 
} 

DEMO