html - 如何让文本覆盖在图像上？

Question

我似乎无法让显示的文本覆盖在图像上。我已经在 codepen 中测试了代码片段，并且可以在那里获得预期的效果。

HTML:

   <div class="container-fluid">
    <div class="row">
        <div class="banner">
            <img src="https://imageshack.com/a/img923/9364/qvCJa4.png" pagespeed_url_hash="616443323" onload="pagespeed.CriticalImages.checkImageForCriticality(this);" />

            <div class="container-fluid purchaceNowOverlayText">
                <div class="row">
                    <div class=" col-sm-1">
                        <hr>
                    </div>
                    <div class="col-sm-11">
                        <h2>Are you Ready? <b>Purchace Here!</b></h2>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12 col-md-6 col-lg-6 headerRow">
                        <img src="images/3bottlesdone.png" width="400px" height="300px">
                    </div>
                    <div class="col-sm-12 col-md-6 col-lg-6 headerRow">
                        <p>This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image This text should overlay over the bg image </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.banner{ position:relative; width:90%; margin:0 auto; }  
.banner img{width:100%;}
.purchaceNowOverlayext{position:absolute; top:50%; color: white;}

Answer 1

打字错误。您的 CSS 类在 purchaceNowOverlayText

上缺少 T