Как сделать так, чтобы текст был наложен на баннер - PullRequest
Новая
       20

Как сделать так, чтобы текст был наложен на баннер

1 голос
/ 01 апреля 2019

У меня есть элемент div баннера с изображением, перекрывающим его.Я хочу, чтобы мой текст не перекрывался с изображением, но возникают проблемы.

Пример проблемы:

Image overlapping text

Вот как выглядит мой html: 

.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%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
  <span class="banner-text">There is a cat above me</span>
</div>

Мои вопросы:

  1. Должно ли изображение быть в div контейнера-жидкости в качестве наилучшей практики?Или он находится вне баннера, как я сейчас, правильно?

  2. Как сделать так, чтобы текст не перекрывался с изображением?

Спасибо за любые советы и любые другие вопросы, которые у вас могут быть!

Ответы [ 2 ]

1 голос
/ 01 апреля 2019 
<!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>
1 голос
/ 01 апреля 2019

Если изображение является логотипом или чем-то, что принадлежит заголовку, то да, вы должны сохранить изображение в контейнере заголовка и текст тоже. Вы можете легко решить проблему с перекрывающимся текстом, просто увеличив vh контейнера div и слегка переместив атрибут top заголовка-текста таким образом.

Однако, если регистр отличается от описанного выше, и вы хотите сохранить текст в этой позиции, но сделать его видимым, тогда вы можете переместить текст баннера из текста и расположить его абсолютно сверху. Как есть, установка z-индекса на 0 (например), пока он все еще находится в контейнере div, не будет иметь никакого эффекта, поскольку z-индекс контейнера div, равный -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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...