text-fill-color：仿蘋果官網介紹效果 CSS設置文字漸變效果文字背景圖遮罩

時間 2019-11-06

標籤 text color 蘋果介紹效果 css 設置文字漸變背景欄目 HTML 简体版

原文原文鏈接

發佈iPhone XR的時候各類心動去官網看了一遍又一遍。
(貧窮使我節省。。。。。。。。。。)
閒着無聊發現裏面的介紹很用大篇幅的有背景文字來介紹。Like this：css

看着挺酷炫的還不錯就看了下實現方式。
還挺簡單的。html

附上demo前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-fill-color css web前端開發</title>
<style>
html{background: #000;}
.text1{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.text2{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background: url(https://www.apple.com/v/iphone-xs/a/images/overview/copy_texture_1_medium.jpg) repeat center center;
    background-size: 100% 100%;//背景的鋪排方式修改下效果更明顯
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.record{
    color: #737373;text-align: center;font-size: 24px;position: fixed;bottom: 0%;left: 0;width: 100%;padding: 20px 0;
}
</style>
</head>
<body>
    <div class="text1">文字顏色漸變</div>
    <div class="text2">文字遮罩照片</div>
    <p class="record">by Jerry yu </p>
</body>
</html>