text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果文字背景图遮罩

栏目: CSS · 发布时间: 6年前

内容简介：发布iPhone XR的时候各种心动去官网看了一遍又一遍。(贫穷使我节省。。。。。。。。。。)闲着无聊发现里面的介绍很用大篇幅的有背景文字来介绍。Like this：

发布iPhone XR的时候各种心动去官网看了一遍又一遍。

(贫穷使我节省。。。。。。。。。。)

闲着无聊发现里面的介绍很用大篇幅的有背景文字来介绍。Like this：

text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果文字背景图遮罩

看着挺酷炫的还不错就看了下实现方式。

还挺简单的。

附上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;
    -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>

text-fill-color：仿苹果官网介绍效果 CSS设置文字渐变效果文字背景图遮罩

mark一下仅供参考 end

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Remote

Jason Fried、David Heinemeier Hansson / Crown Business / 2013-10-29 / CAD 26.95

The “work from home” phenomenon is thoroughly explored in this illuminating new book from bestselling 37signals founders Fried and Hansson, who point to the surging trend of employees working from hom......一起来看看《Remote》这本书的介绍吧!

码农工具