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

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

查看所有标签

猜你喜欢:

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

码农书籍

写给大家看的Web设计书

Robin Williams、John Tollett / 苏金国、刘亮 / 人民邮电出版社 / 201005 / 69.00元

在这个网络时代，Web设计几乎已经成为每个人生活的必备技能。如果你想自力更生创建一个网站，或者认为自己的网站在设计上还不尽如人意，希望它看上去更具创意和专业性，那么本书正是为你准备的！作者Robin和John先采用通俗易懂的方式将有关基础知识娓娓道来，比如Internet、搜索信息、构建简单网页等，然后为我们奉上了精妙的技巧、技术和设计示例来启发大家的设计灵感，比如Web基本设计原则、实现......一起来看看《写给大家看的Web设计书》这本书的介绍吧!

码农工具