Рабочая альтернатива для {фонового зажима: текст} для достижения прозрачного текста с градиентным фоном в браузерах, отл ⇐ CSS

[Anonymous]

Мне нужна помощь с свойством фонового зажигания в Chrome по сравнению с другими браузерами. Поскольку логотип и заголовок являются двумя отдельными элементами, я хотел бы создать одну фоновую анимацию для обоих элементов (вместо одного для каждого и позиционировать их, чтобы градиентная анимация выглядела одинаково), а затем сделать их содержание / шрифт прозрачным, так что Градиент создает иллюзию составления цвета шрифта. Однако, это не сработало, так как установление фона логогического текста для белого (очевидно) предотвращает отображение градиента под элементом. < /P>
, чтобы этот подход работал. Затем используется {Mix Blend-Mode: экран} с черным шрифтом и белым фоном. Это отлично работает в Chrome, однако, при тестировании с помощью Safari или Firefox весь элемент P является прозрачным, вместо текста. фоновая зажима: текст; -Моз-Бэк-Группа: Текст; не решает проблему, а вместо этого ломает дисплей в хроме, не изменяя ничего в Safari или Firefox. Настройка -Webkit-Text-Fill-Color: прозрачный; -Моз-текстовый цвет-цвета: прозрачный; затем делает цвет шрифта белым, а фон все еще прозрачный. Я мог бы использовать SVG с маскировкой SVG - но я бы предпочел не использовать это вместо HTML для текста. Почему код ведет себя так? Разница можно увидеть, открыв код в сафари или Firefox, в отличие от хрома или края, где он работает нормально:
https://codepen.io/alessandrov/pen/goqywoy < /p>


/* mockup CSS */

a {
font-size: 200%;
text-decoration: none;
}

.logo {
display: flex;
flex-direction: row;
align-items: center;
width: fit-content;
height: 2.7rem;
}

.logo-text {
padding: 0 0.6rem;
font-weight: 700;
font-size: 124%;
}

/* gradient animation CSS */

.logo-img {
height: 2rem;
background: transparent;
background-clip: content-box;
outline: 0.4rem solid white;
}

.logo-text.rainbow {
color: black; /* transparent with mix-blend-mode & background-color */
background: white;
background-clip: text;
mix-blend-mode: screen;
padding: 0.2rem 0.6rem;
}

.logo {
background: repeating-linear-gradient(to right, #ff0018, #ffa52c, #ffff41, #008018, #0000f9, #86007d, #ff0018);
background-repeat: repeat-x;
background-size: 400% 100%;
animation: rainbow_animation 6s linear infinite;
}

@keyframes rainbow_animation {
0% {
background-position:100% 50%
}
100% {
background-position:-33% 50%
}
}< /code>


Logo
< /code>
< /div>
< /div>
< /p>
Как это должно выглядеть по сравнению с тем, как это выглядит в Webkit /Gecko: < /p>




Подробнее здесь: https://stackoverflow.com/questions/764 ... -text-with