Как показать остальную часть фонового изображения, используя :: после? - PullRequest
Новая
       20

Как показать остальную часть фонового изображения, используя :: после?

0 голосов
/ 25 марта 2019

Я создаю сайт, дизайн героя состоит из фонового изображения и текста в нижней части фонового изображения, с белым матовым фоном с остальным фоновым изображением в виде маски

У меня проблема в том, что я не могу получить :: after, чтобы показать оставшуюся часть фонового изображения

Я попытался добавить оставшееся фоновое изображение в контейнер героя :: после и заголовок героя :: после. Проблема в том, что мне нужно, чтобы ширина остальной части фонового изображения определялась длиной символа, что делает эту сложную проблему решаемой.

Вот как выглядит герой в настоящее время, так как мне удалось показать оставшуюся часть фонового изображения. вверх, но не для отображения части фонового изображения, которое я хочу показать issue HTML 

  <section class="project-header  project-header--home">
    <div class="container container--fl">
      <h1 class="project-header__title  project-header__title--home">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</h1>
    </div>
  </section>

CSS 

.container {
  width: 94%; 
}
.container--fl {
  width: 100%; 
}
.project-header {
  background-repeat: no-repeat;
  background-size: cover;
  padding: 16rem 0 0;
  position: relative;
}

.project-header--home {
  background-image: url(../images/hero/home_hero.png);
}

.project-header__title {
  background-color: rgba(255,255,255,0.6);
  color: #000;
  display: inline-block;
  font-size: 4.5rem;
  margin: 0;
  max-width: 30ch;
  padding: 2rem;
  position: relative;
}

.project-header__title--home {
  bottom: -7.5rem;
}

.project-header__title--home::after {
  background-image: url(../images/hero/home_hero.png);
  bottom: 0;
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  max-width: 30ch;
  position: absolute;
  width: 100%;
  z-index: -1;
}

Это сложно объяснить, поэтому я покажу вам, как должен выглядеть герой

design

...