Question

我似乎无法将显示的文字叠加在图像上。我已经在codepen中测试了代码的snippits，并且可以在那里获得所需的效果。

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课程在purchaseceNowOverlay T ext

上缺少一个T.

如何在图像上叠加文字？

1 个答案: