如何在横幅上叠加文字图像

时间:2019-03-31 22:18:24

标签: html css bootstrap-4

我有一个banner div元素,其中的图片与之重叠。我想让文字不被图像覆盖,但是出现问题。

问题示例:

Image overlapping text

这是我的html的样子:

jr $ra
.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}

.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
}

.banner-text {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

我的问题是:

  1. 作为最佳实践,图像应位于容器流体div中吗?还是像现在这样将它放在横幅之外,对吗?

  2. 如何使文本不与图像重叠?

感谢您对问题的任何建议,以及您可能有的其他建议!

2 个答案:

答案 0 :(得分:1)

如果图像是徽标或标题中的某些内容,则可以,您应该将图像以及标题中的图像保留在标题容器中。您可以轻松地解决重叠文本的问题,只需增加容器div的vh并以这种方式稍微向下移动banner-text top属性。

但是,如果情况不是上述情况,并且您希望将文本保持在该位置但使其可见,则可以将横幅文本从文本中移出并将其绝对从顶部放置。照原样,当z-index仍在容器div内时将其调整为0(例如)将没有任何效果,因为容器div的z-index为-1将优先,并且如果调整得更高,则图像也会重叠

希望这会有所帮助

.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}

.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
}

.banner-text {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  top: 70px;
  z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">

</div>
<span class="banner-text">There is a cat above me</span>

答案 1 :(得分:1)

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to Example</title>    
<style>
.header-banner-container {
  background: #221E1F;
  position: relative;
  width: 100%;
  height: 11vh;
  top: 38px;
  z-index: -1;
}
.header-logo {
  position: absolute;
  padding-left: 3px;
  height: 89px;
  width: 92px;
  border-radius: 100%;
}
.banner-text {
  font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: white;
    position: absolute;
    transform: translateY(-50%);
    top: 49px;
    z-index: 0;
    left: 50px;
    text-shadow: 0px 3px 3px black;
}
  </style>
  </head>
  <body>
      <img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
      <div class="container-fluid header-banner-container">      
      </div>
      <span class="banner-text">There is a cat above me</span>
  </body>
</html>