图像上的文本造型

Question

我在两个不同的div中有一个图像和文本，背景颜色，一个div中的文本是长的，第二个div是短的，但是两个div的宽度是相等的，也就是说我不想要。这是我的代码：

​

.banner{
  position: relative;
}
.banner img{
  width: 100%;
}
.image-text{
  position: absolute;
  top: 40%;
  left: 8%;
}
.image-text h2{
  font-size: 22px;
  font-weight: bolder;
  color: #fff;
  margin: 0px;
}
.upper-text{
  background: #2b96c3;
  padding: 5px 10px;
}
.lower-text{
  background: #0d729c;
  padding: 5px 10px;
}

<section>
  <div class="banner">
    <img src="https://i.imgur.com/xTeFbiv.jpg">
    <div class="image-text">
      <div class="upper-text">
        <h2>Excellent Successfull</h2>
      </div>
      <div class="lower-text">
        <h2>Sustainable</h2>
      </div>
    </div>
  </div>
</section>

​

我所需要的只是附图中所需的输出：

​

。

我试过很多技巧，但不知道怎么做。

Answer 1

显示第二个div inline-block，这样它就不会跨越100%的宽度。以下是一个例子：

​

.banner{
  position: relative;
}
.banner img{
  width: 100%;
}
.image-text{
  position: absolute;
  top: 40%;
  left: 8%;
}
.image-text h2{
  font-size: 22px;
  font-weight: bolder;
  color: #fff;
  margin: 0px;
}
.upper-text{
  background: #2b96c3;
  padding: 5px 10px;
}
.lower-text{
  background: #0d729c;
  padding: 5px 10px;
  display: inline-block;
}

<section>
  <div class="banner">
    <img src="https://i.imgur.com/xTeFbiv.jpg">
    <div class="image-text">
      <div class="upper-text">
        <h2>Excellent Successfull</h2>
      </div>
      <div class="lower-text">
        <h2>Sustainable</h2>
      </div>
    </div>
  </div>
</section>

​