css - Bootstrap CSS 底层类不工作

Question

我希望消息位于背景图像之上。我希望消息被修复/卡住，以便它与背景图像容器的底部对齐。底部:0；似乎什么也没做。我需要它具有响应性，所以我不能为底层设置固定的像素数量。不确定我做错了什么？

.bg-img {
    z-index: 4;
    position: relative;
}
.bg-img img {
    width: 100%;
}
.message {
    position: absolute;
    z-index: 5;
    padding-top: 50px;
    padding-bottom: 50px;
    bottom: 0;
    background: rgba(232,218,193,0.03);
}

<section class="full-image-desc">
<div class="container-fluid message">
    <div class="row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8">
            <h1>Title</h1>
            <h2>Sub-Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum augue vitae magna ultricies, sit amet fermentum risus fringilla. Donec arcu eros, suscipit ut ornare id, tincidunt eget nisl. Pellentesque non massa quis nibh rutrum tempor a eget nisl. Vestibulum ut laoreet nulla, id posuere lectus. Nulla id est ligula. Mauris vitae ipsum sed metus eleifend interdum at ac tortor. Aliquam erat volutpat. Curabitur vel eleifend augue, eget consectetur purus. Sed imperdiet pulvinar urna at porta.</p>
        </div>
    </div>
</div>
<div class="bg-img">
   <img src="img/background-image.jpg" alt=""/>
</div>
</section>

Answer 1

要使其具有响应性，您需要元数据来告诉浏览器它在每个平台(台式机、平板电脑或手机)上应该是什么样子。至于要在图像顶部的文本，它们需要位于同一个 div 中。

<div class="col-xs-12 col-sm-offset-2 col-sm-8" background="img/background-image.jpg">
            <h1>Title</h1>
            <h2>Sub-Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum augue vitae magna ultricies, sit amet fermentum risus fringilla. Donec arcu eros, suscipit ut ornare id, tincidunt eget nisl. Pellentesque non massa quis nibh rutrum tempor a eget nisl. Vestibulum ut laoreet nulla, id posuere lectus. Nulla id est ligula. Mauris vitae ipsum sed metus eleifend interdum at ac tortor. Aliquam erat volutpat. Curabitur vel eleifend augue, eget consectetur purus. Sed imperdiet pulvinar urna at porta.</p>
        </div>

这也可以在css中完成

div {
    background-image: url("img/background-image.jpg");
}

我会建议使用 css 方式，因为从长远来看，它会让事情更容易找到。