Недавно я просматривал официальный сайт Apple и случайно нашел строку текста на официальном сайте Apple.Я сначала подумал, что это картинка, но когда я нажал ctrl+A, я был удивлен, обнаружив, что цветной текст реализован с помощью чистого CSS. ., вдруг заинтересовался этим волшебным текстом.
Не много ерунды, нижеследующий эффект и код, друзья, которым это нравится, могут обратить внимание:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
< meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Документ</title>
<style>
body { background: #000; } div { поле: авто; ширина: 60%; высота: 800 пикселей; высота строки: 100 пикселей; выравнивание текста: по центру; размер шрифта: 40px; вес шрифта: полужирный; цвет: прозрачный; background: url('./images/iphone.jpg') центр без повторов; размер фона: обложка; -webkit-background-clip: текст; } </стиль>
</head>
<body>
Этот новый дисплей на <div> — самый продвинутый ЖК-экран из когда-либо существовавших на iPhone. Инновационная конструкция подсветки позволяет дисплею доходить до углов фюзеляжа. Таким образом, кажется, что весь экран покрыт яркими и яркими цветами. </див> <
/тело>
</html>