Question

如何将文本与图像重叠（图像前面的文本）并将它们居中，同时在Bootstrap中保持响应（不使用位置固定或背景图像）？

<pre>
<!--jumbotron-->
<div class="jumbotron">
<div class="container">
  <div class="brand">
     <h1 id="success">Alexandra</h1>
   <img class="img-responsive" src="lavrente.jpg" width="300" height="52" >
  </div>
 </div>
</div>
 </pre>

<pre>#success {
color: #000;
font-family: "Chopin Script";
position:relative;
z-index: 1;


}
.img-responsive {
position:relative;

z-index: 0;}

</pre>

Answer 1

在文字上使用position: absolute。

h1{
    position: absolute;
}

Answer 2

这是另一种完全响应的解决方案：

  <div class="jumbotron">
   <div class="container">
    <div class="brand">
        <img src="http://via.placeholder.com/350x150" alt="" class="img-responsive" width="300" height="52">

            <h1 id="success">Alexandra</h1>

    </div>
  </div>
</div>

CSS：

.brand {
    position: relative;
    text-align: center;

}
#success {
   position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
}

实时预览：https://codepen.io/mesapkota/pen/QryREB

引导程序中的重叠元素

2 个答案: