如何在图像上部分放置徽标，然后在图像上放置文本

Question

我的主题有这样的标记：

<div class="logo">
   <a id="logo" href="http://test.rudtek.com" title="test">
        <img class="logo-main scale-with-grid" src="/wp-content/uploads/2017/03/seasons_management_logo.jpg" alt="seasons_management_logo">
    </a>
    <div class="containerBox">
        <img class="img-responsive" <img="" src="/wp-content/uploads/revslider/slider-home-4/img-slider-4-3-825x510.jpg">
        <div class="text-box">
            <p class="dataNumber">Home 4</p>
        </div>
    </div>
</div>

这给我一个这样的图像：

坚持我真正想要的样子是这样的：

尺寸比率在这里并不是最重要的，但我无法确定如何让季节标志超越亲爱的形象。

这是我的css：

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

Answer 1

您绝对可以将#logo置于.containerBox之上并#logo z-index，以便将其叠加在顶部，然后在{{1}上使用margin-left将它推到右边。

＆＃13;

＆＃13;

.containerBox

＆＃13;

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

/* added these styles */
.logo {
  position: relative;
}
#logo {
  position: absolute;
  top: 1em; left: 0;
  z-index: 1;
  background: white;
}
.containerBox {
  margin-left: 100px;
}

/* you don't need this, just for this pepsi logo which is huge */
#logo img {
  max-width: 200px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

迈克尔打败了我，但这是另一种方法。

https://codepen.io/anon/pen/VpErXP

.logo {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

#logo {
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 99;
}
#logo img {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}