#html #css #safari
#HTML #css #safari
Вопрос:
Я не знаю почему, но когда я устанавливаю
background-clip: text
чтобы обрезать градиент / изображение / что угодно с текстом (дисплей: встроенный), только Safari не работает так, как предполагается.
Я воссоздал перо с этой проблемой:https://codepen.io/steexd/details/qBZVbWY
Протестируйте его в Firefox или Chrome, а затем в Safari: вы заметите, что многострочный текст неправильно обрезает градиент фона.
Ожидаемый результат:
Safari:
Любая помощь была бы очень признательна 🙂
Ответ №1:
Вы можете добавить -webkit-box-decoration-break: clone;
Это сделает текст разборчивым, однако это не совсем то, что вы просите, поскольку он будет повторять градиент в каждой строке.
свойство box-decoration-break в MDN
h1 {
max-width:120px;
}
span {
background-image: -webkit-linear-gradient(right, red, pink);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
}
<div>
<h1>Hi, i'm a text with a <span>long span gradient</span>.</h1>
</div>