Question

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

问题示例：

这是我的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%);
}

我的问题是：

作为最佳实践，图像应位于容器流体div中吗？还是像现在这样将它放在横幅之外，对吗？
如何使文本不与图像重叠？

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

Answer 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>

Answer 2

<!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>

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

2 个答案: