时间戳

首页 > 解决方案 > 如何在图像向右浮动时使文本重叠

html - 如何在图像向右浮动时使文本重叠

问题描述


我正在尝试在我的网站上创建一个与图像功能重叠的文本。这是我想要的输出： 在此处输入图像描述

到目前为止，我已经完成了第一个重叠框。但是，我不能让图像向右浮动，文本向左浮动。

#image-overlap {
  position: relative;
  margin: 50px 0%;
}

.overlap-text {
  position: absolute;
  left: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text h1 {
  color: #000;
}

#image-overlap-right img {
  float: right;
}

.overlap-text-right {
  position: absolute;
  right: 55%;
  bottom: 10%;
  width: 43%;
  font-size: 30px;
  line-height: 50px;
  font-weight: 200;
  color: #000;
}

.overlap-text-right h1 {
  color: #000;
}

.overlap-text-right img {
  float: right;
}
<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>

  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

我的问题的codepen是https://codepen.io/mrsalami/pen/MXRZdE

标签： htmlcss

解决方案

那这个呢：

#image-overlap {
    position: relative;
    margin: 50px 0%;
  index:1
}

.overlap-text {
    position: absolute;
    left: 55%;
    bottom: -90%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
  z-index:9;
    color: #000;
    h1{
        color: #000;
    }
}

#image-overlap-right{
  img{
    float:right;
    position:relative;
  }
}

.overlap-text-right {
    position: absolute;
    right: 20%;
    bottom: 20%;
    width: 43%;
    font-size: 30px;
    line-height: 50px;
    font-weight: 200;
    color: #000;
    h1{
        color: #000;
    }
  img{
    float:right;
  }
}
<div class="col-md-12">
  <div id="image-overlap" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text">
      <h1> Honest and open bonus structure</h1>
    </div>
  </div>
  
  <div id="image-overlap-right" class="mt-50">
    <img src="https://placehold.it/600x400" alt="" style="max-height: 600px;">
    <div class="overlap-text-right">
      <h1> Marketing leading infrastructure</h1>
    </div>
  </div>
</div>

我使用了 z-index 和右/下的组合。无论如何，您必须管理响应部分。所以编辑右/下 %s

推荐阅读