Отключение фонового эффекта текста в зависимости от расположения текста?

Question

Я использую -webkit-background-clip для создания текстового эффекта нокаута в дополнение к использованию background-attachment, установленному как fixed, поэтому, когда пользователь прокручивает фон текста, перемещается

section > h2{
    background-image: linear-gradient( to right bottom, rgba( 107, 187, 219, .7), rgba( 37, 149, 195, .7 ) ), url( '../images/background.jpg' );
    background-attachment: fixed;
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
    -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
    //margin: 40px 0 0 80px;
    font-size: 72px;
     font-weight: 900;
     margin-bottom: 60px;
     font-family: "Avenir";
     text-transform: uppercase;
}

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

Вот текст, расположенный на странице, и когда я изменяю размер окна браузера, фон начинает исчезать, но это происходит только тогда, когда для свойства background-attachment установлено значение fixed

Answer 1

Вы пытались использовать положение: относительное; к основному элементу и положение: абсолютное; к вашему тексту тогда, переведите его, чтобы сделать его отзывчивым и не мешать другим объектам в абсолютном положении?

Пример:

.maindiv{
 position: relative;
}

h1#myid {
 position: absolute;
 top: 20%;
 left: 50%;
 transform: translate(-50%, -20%);
}

Надеюсь, я вам помог,

Привет

Квадрат.