html - 在 Bootstrap 3 中的图像上添加文本的正确方法

Question

一劳永逸地，我需要学习如何使用 Bootstrap 3 在图像上放置文本和按钮。我试图达到这个结果:


网址是:Example of the image

我认为结构是这样的:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="container">
                <div class="row">
                    <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
                    <div class="col">
                        <div class="home_slider_content"  data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
                            <div class="home_slider_title">A new Online Shop experience.</div>
                            <div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra velit venenatis fermentum luctus.</div>
                            <div class="button button_light home_button"><a href="#">Shop Now</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

关于 HTML 的结构，我是否走在正确的道路上？

此致。

Answer 1

你可以试试这个结构。我将其用于我的个人用途。

.banner{position:relative}
.banner img{width:100%}
.banner .container{position: absolute; left:0; right:0; top:50%; text-align:left; transform:translateY(-50%)}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banner"> <img src="https://i.ibb.co/h9pxMmg/home-slider-1.jpg">
	<div class="container">
		<div class="home_slider_content"  data-animation-in="fadeIn" data-animation-out="animate-out fadeOut">
			<div class="home_slider_title">A new Online Shop experience.</div>
			<div class="home_slider_subtitle">Lorem ipsum dolor sit amet, consectetur
				adipiscing elit. Nullam a ultricies metus. Sed nec molestie eros. Sed viverra
				velit venenatis fermentum luctus.</div>
			<div class="button button_light home_button"><a href="#">Shop Now</a></div>
		</div>
	</div>
</div>