Я много пробовал для градиента текста. Я нашел код для сафари и хрома, но он не совместим с другими браузерами. Я хочу, чтобы это работало без использования фонового изображения. Если у вас есть правильное решение, пожалуйста, предоставьте.
Кроссбраузерный текстовый градиент в чистом css без использования фонового изображения
Ответы (3)
Я обнаружил, что лучший способ сделать это - использовать градиенты SVG, это легко сделать и не требует никаких изображений, ниже приведен код, который создает простой текстовый градиент с использованием SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>
Вы можете изменить значения x и y для создания горизонтального/вертикального или диагонального градиента, вы также можете применять к нему стили с помощью таблицы стилей CSS, все, что для этого требуется, — это дополнительная строка кода между тегами defs.
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
Этот метод работает в последних версиях Chrome, IE, Firefox и Safari. Вы также можете применять радиальные градиенты, размытие и фильтры. Дополнительную информацию см. в W3 Schools.
text-shadow
, потому что это не фоновый взлом. Поддержка background-clip: text
сейчас лучше, но это все еще не полная поддержка, и, как я уже сказал, это обходной путь caniuse.com/#feat=mdn-css_properties_background-clip_text
- person jave.web; 09.02.2020
Вы можете сделать это с помощью плагинов jQuery.
Плагин Cufon тоже может иметь это, вы должны проверить это. Это также можно сделать с помощью плагина Raphael или SVG и VML, но кроссбраузерное решение на чистом CSS трудно найти.
Только для Chrome и Safari:
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
Для остальных браузеров вы должны использовать JavaScript.