I recently browsed Apple’s official website, and accidentally found a row of text on Apple’s official website. I thought it was a picture at first, but when I pressed ctrl+A, I was surprised to find that the colorful text was realized with pure CSS. , suddenly became interested in this magical text.
Not much nonsense, the following is the effect and code, friends who like it are welcome to pay attention:
<!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>Document</title>
<style>
body {
background: #000;
}
div {
margin: auto;
width: 60%;
height: 800px;
line-height: 100px;
text-align: center;
font-size: 40px;
font-weight: bold;
color: transparent;
background: url('./images/iphone.jpg') no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
}
</style>
</head>
<body>
This new display on <div> is the most advanced LCD screen ever on an iPhone. The innovative backlight design allows the display to extend to the corners of the fuselage. So it looks like the entire screen is covered in vivid and vivid colours. </div>
</body>
</html>