如何使文字覆盖在图像上？

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类在purchaceNowOverlay T ext上缺少T