Текст поверх контура клипа

Мне нужно, чтобы белые буквы текли по траектории клипа. Я пробовал z-index, но это не работает

Вот мой код:

.header {
    height: 85vh;
    background-image: linear-gradient(
        to right bottom,
        rgba(255,255,255, 0.8),
        rgba(0,0,0, 0.8)),
    url(../../img/hero.jpg);
    background-size: cover;
    background-position: top;
    position: relative;

    clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);

<header class = "header">
    <div class = "header__logo-box">
        <img src = "img/logo-white.png" alt = "Logo" class = "header__logo">
    </div>

    <div class = "header__text-box">
        <h1 class = "heading-primary">
            <span class = "heading-primary--main">My Blog</span>
            <span class = "heading-primary--sub">Enrique Cena</span>
        </h1>

        <a href = "#section-tours" class = "btn btn--white btn--animated">About me</a>
    </div>

html css clip-path

27.12.2018 19:48

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 631

Ответы 2

возможно, вы можете что-то сделать с помощью ниже:

.header {
   position: relative;
   height: 85vh;
   width: 100%;
}

.header::before {
   z-index: -1;
   content: '';
   top: 0;
   left: 0;
   position: absolute;
   height: 100%;
   width: 100%;
   background-color: cyan;
   background-size: cover;
   background-position: top;
   clip-path: polygon(100% 100%, 100% 0, 65% 100%, 63% 100%, 100% 0, 99% 0, 100% 0, 13% 100%, 11% 100%, 100% 0, 0 81%, 0 77%, 100% 0, 0 45%, 0 43%, 100% 0, 0 0, 0 0, 0 100%);
 }

Пожалуйста, замените background-color на ваш background-image

27.12.2018 20:17

Это мое решение: я беру h1 из текстового поля и помещаю текст и заголовок в div. Этот div .wrap такой же высокий, как и header. Я позиционирую h1 относительно этого div. Надеюсь, это поможет.

.header {
  height: 85vh;
  background-image: linear-gradient(
      to right bottom,
      rgba(0, 180, 180, 0.8),
      rgba(0, 0, 255, 0.8)
    ),
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/featured-space-policy.jpg);
  background-size: cover;
  background-position: top;
  position: relative;

  clip-path: polygon(
    100% 100%,
    100% 0,
    65% 100%,
    63% 100%,
    100% 0,
    99% 0,
    100% 0,
    13% 100%,
    11% 100%,
    100% 0,
    0 81%,
    0 77%,
    100% 0,
    0 45%,
    0 43%,
    100% 0,
    0 0,
    0 0,
    0 100%
  );
}

.wrap {
  position: relative;
  height: auto;
}
h1 {
  position: absolute;
  display: block;
  width: 100%;
  height: 1em;
  margin: auto;
  text-align: center;
  top: 0;
  bottom: 0;
}

<div class = "wrap">
<header class = "header">
    <div class = "header__logo-box">
        <img src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat" alt = "Logo" class = "header__logo">
    </div>

<div class = "header__text-box">
       

        <a href = "#section-tours" class = "btn btn--white btn--animated">About me</a>
    </div>
</header>

   <h1 class = "heading-primary">
            <span class = "heading-primary--main">My Blog</span>
            <span class = "heading-primary--sub">Enrique Cena</span>
        </h1>
  
</div>

27.12.2018 20:48

Другие вопросы по теме

CSS Box Shadow перекрывает предыдущую тень div

Страницы Github не отображают CSS и файл изображений

Тег изображения внутри кнопки заставляет js перестать работать на Chrome

Почему getComputedStyle.width / Height дает разные значения в chrome и edge для display: inline?

Центр начальной загрузки и проблема с выравниванием по правому краю

Одинаковая высота для всех столбцов в строке в Bootstrap

Bootstrap: медиа-запросы CSS не заменяют исходный CSS

Как предотвратить перекрытие div в сафари

Мобильные адаптивные таблицы

Как сделать так, чтобы загружаемое изображение располагалось по центру моей страницы?

Текст поверх контура клипа

Ответы 2

Другие вопросы по теме

Похожие вопросы