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

ajhongshaorou 2019-06-30

发布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;
    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>

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

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

mark一下 仅供参考 欢迎更正补充 end

ajhongshaorou

ajhongshaorou

相关推荐

CSS其他属性

CSS 可以设置背景颜色和背景图片，并且可以对图片进行相关设置。容器尺寸小于图片尺寸，只显示元素范围以内的背景图。建议背景图片后面的地址，url不要加引号。div{background:#00ff00 url no-repeat scroll center

teresalxm / 0评论 2020-05-29

CSS其他属性

CSS 可以设置背景颜色和背景图片，并且可以对图片进行相关设置。容器尺寸小于图片尺寸，只显示元素范围以内的背景图。建议背景图片后面的地址，url不要加引号。div{background:#00ff00 url no-repeat scroll center

zhanghaibing00 / 0评论 2020-05-29

web前端入门到实战：CSS3制作文字背景图

文字带上渐变色，或者说让文字透出图片。这些效果 CSS 属性也可以完成。使用 mix-blend-mode 能够轻易实现，我们只需要构造出黑色文字，白色底色的文字 div ，叠加上图片，再运用 mix-blend-mode 即可，简单原理如下：。使用了这个

葉無聞 / 0评论 2020-01-18

CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解）

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。背景图像的某些部分也许无法显示在背景定位区域中。contain 　　 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

sdbxpjzq / 0评论 2019-12-11

如何使用 css3 transform 属性来变换背景图

使用 css3 transform 属性可以轻易的旋转，倾斜，缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。这个听起来很赞。目前 W3C 没有关于如何旋转背景图的提案。幸运的是，我们找到一个解决方式。这个元素可以使用任何样式，但一定

AlisaClass / 0评论 2019-11-18

Opencv实现抠图背景图替换功能

本文实例为大家分享了Opencv实现抠图替换背景图的具体代码，供大家参考，具体内容如下。下面简单图片演示一下：。python的opencv代码如下：。rows,cols,channels = img.shape#rows，cols最后一定要是前景图片的，后

Jasterwisdom / 0评论 2019-05-21

404页面背景图

刚刚搜索机器人资料时，发现几个不错的图片，适合做404的背景图，这里分享下。没什么技术相关的，仅供参考娱乐。教学机器人：这里我们可以用PS设计下，将404放到黑板上。或者用canvas控制都可

高触Toucher / 0评论 2018-04-16

Win7系统如何调用命令关闭开机动画及更换登录背景图

　　Windows 7系统如何调用命令关闭开机动画?虽然自定义Windows 7启动、登录和桌面背景操作比较复杂，但我们仍然可以实现。Win7系统为你带来不同以往的炫酷体验，Win7桌面的炫彩效果，尤让人心动。　　看久了Windows启动的动画，会不会觉得

fuckyoubitchsb / 0评论 2013-09-10

Flutter 添加背景图片

),上面这段代码可以给body添加一张背景图。然后在背景图之上再添加任意child。

任玉刚 / 0评论 2019-07-01

前端资源加载重试

介绍对于TO C的应用，用户网络千差万别，总有各种网络问题导致资源加载失败，使得访问时出现白屏，样式错乱等。资源加载重试，则是提高用户体验中重要的一环。最近开始尝试用 Vue 整套技术体系进行开发。script 脚本css 样式文件img 图片backgr

WKYCSDN / 0评论 2019-07-01

[译]HTML&CSS Lesson7: 设置背景和渐变色

背景对网站的设计有重大的影响。它有利于建立网站的整体感觉，设置分组，分配优先级，对网站的可用性也有相当大的影响。在我们决定如何实现背景之前，我们要考虑到背景是为了网站的整体布局服务的。在这节课中，我们将会学习如何在元素上实现各类背景色，包括渐变色。添加背景

csscode / 0评论 2019-06-28

CSS背景图与html插入img的区别

而在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。

nicepainkiller / 0评论 2016-11-01

记一次解决谷歌浏览器Google Chrome Helper占用过高cpu问题

通常来说Chrome如果占用过高的内存，这并不是什么问题，毕竟Chrome的性能以及易用性是建立在占用很多内存的基础上的。但是无论什么程序，持续的占用超过80%的cpu，都是极不正常的。大多数程序都是占用维持在低于10%的CPU。活动监视器指出问题出现在C

kingwbs / 0评论 2019-06-27

CSS 背景图随div大小缩放 兼容IE

width:500px;height:500px;-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;backgr

randyjin / 0评论 2014-07-16

css ie6 下的png

.classPng{position: absolute;left:200px;width: 361px;/*高度一定要设要不然背景会缩进*/height:100px;/*高度一定要设要不然背景会缩进*/background:url(images/mapS

xuhaidady / 0评论 2013-06-28

CSS教你玩转背景background-position（1）

在HTML页面构建时，刚入门的前端小狮子?们经常被背景图的位置，尺寸所迷惑，怎样才能更好的处理背景图，让背景图达到你想要的效果呢，那么，退后，朕又开始装逼了～。好说：直接设background-posiiton：center top 就哦了，他会让背景图从

yezi / 0评论 2019-06-21

flex之程序员的美化

最近在看flex4的skin，flex4对于flex3的更改幅度比较大，例如背景图css里就没有，由于处于flex3到flex4的过渡期，有以下三种方法，都不是万能简单的，按实际情况混合用吧。最郁闷的是Group居然不支持skinClass，哎还好有Ski

学海无边回头是岸 / 0评论 2012-07-06

css属性 background

background简写属性在一个声明中设置所有的背景属性。通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。background-attachment规定背景图像是否固定或者随着页面的

hlfsunshine / 0评论 2012-06-21

CSS背景Background

请参阅各参数对应的属性。padding：从padding区域开始显示背景。no-clip：从border区域向外裁剪背景。<percentage>：取值为0%到100%之间的值。0表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定

魄竹 / 0评论 2011-11-27

Android滑动背景图效果：MovingImageView

创建一个自定义的ImageView来实现图像在屏幕上运动。用法To use MovingImageView, add the module into your project and start to build xml or java.

zwenkai / 0评论 2016-05-11

解决Activity启动黑屏及设置android:windowIsTranslucent不兼容activity切换动画问题

之前项目中遇到打开Activity后黑屏的问题，网上找到解决办法是通过设置theme和style属性可以实现。直到最近开发过程中发现自己在欢迎页启动的线程由于请求和处理的数据量过大而，导致欢迎页在出现之前界面上会有一个短暂的白色闪屏停留，当然白色闪屏的停留

woolnil / 0评论 2015-03-12

UIButton 背景图拉伸

纵观移动市场，一款移动app，要想长期在移动市场立足，最起码要包含以下几个要素：实用的功能、极强的用户体验、华丽简洁的外观。华丽外观的背后，少不了美工的辛苦设计，但如果开发人员不懂得怎么合理展示这些设计好的图片，将会糟蹋了这些设计，功亏一篑。iOS中提供很

liuwentao / 0评论 2014-04-01

微信小程序开发背景图显示功能

当然 image标签src属性也可以使用网络url或者base64图片编码。

wiuqt / 0评论 2018-08-08

微信小程序排坑指南详解

微信小程序里面是允许用户自定义背景图的，但是限定了背景图的路径及地址，之前一直用相对路径来写，微信开发者工具中也显示出了背景图，误以为没有问题，但是预览的时候发现手机中不显示背景图，这就是今天介绍的第一个坑，背景图不允许为本地图片。})修改以后重新编译预览

tianping / 0评论 2019-05-10

Bootstrap框架结合jQuery仿百度换肤功能实例解析

换肤功能的应用很广，不管是搜索界面还是普通的管理界面等等，都可以进行设计并且应用换肤功能，起到更好的用户体验。今天仿造百度的换肤功能，实现了基本的换肤功能，接下来将会为大家介绍如何实现。在设计界面的过程当中，我采用了Bootstrap框架，以便更好的适应屏

夜光寒 / 0评论 2016-09-17

使用javascript控制cookie显示和隐藏背景图

每当重大节日期间，各大主流网站首页会披上节日的盛装，设计者一般会使用大幅背景图片来获得更好的视觉冲击效果，当然，也要考虑到有些用户不习惯这大背景图，那么在背景图上放置“关闭”按钮是有必要的，用户只要点击“关闭背景”按钮，大幅背景图将会消失。

CoffeyLiu / 0评论 2014-02-12

jquery动态更换设置背景图的方法

有些时候，我们可以为用户提供很贴心的功能，比如判断用户是什么时候来访问的，然后给出一句问候，晚上好，下午好之类的。并且更换网页的背景颜色，比如晚上的时候就可以用满天星星的背景，白天就用阳光灿烂，或者特定节日就用该主题背景，让你的网站显得非常灵活，不枯燥。v

keyijing / 0评论 2014-03-25

php实现背景图上添加圆形logo图标的方法

本文实例讲述了php实现背景图上添加圆形logo图标的方法。分享给大家供大家参考，具体如下：。list = getimagesize; //获取原图尺寸

PHP100 / 0评论 2019-03-28

全面解析PHP验证码的实现原理 附php验证码小案例

我们需要开启gd拓展，可以使用下面的代码来查看是否开启gd拓展。然后在浏览器上Ctrl+F查找gd选项即可验证自己有没有装这个拓展，如果没有的话，还需要自己全装一下这个拓展。创建一个填充色，并用imagefill方法来附着。适时的释放资源会减轻对服务器请求

PHP100 / 0评论 2019-03-28

php缩放gif和png图透明背景变成黑色的解决方法

$color=imagecolorallocate($img,255,255,255);imagefill($img,0,0,$color);

PHP100 / 0评论 2019-03-28

css中background-origin属性的使用

border-box表示元素背景图像相对于border区域开始定位。总结，background-origin属性定义了背景图像的相对定位位置，这个位置可以用background-position来改变，而且元素背景图像的区域不会因此被限定住，只对元素背景图

从零学习前端开发 / 0评论 2018-03-30

免越狱隐藏Dock及文件夹背景图！适合iPhoneX、8/7/6等机器

想到iOS主画面上屏幕最底那块Dock会有磨砂背景美化效果，也许有些用户觉得这并不好看，恰好设备又不能越狱，其实也有个不需要越狱就能够隐藏Dock技巧，相信也有在旧版本iOS上实现过这技巧，不过在最新iOS 11与iPhone X、iPhone 8/8 P

辞客堂数位杂谈版 / 0评论 2017-12-29

UGUI适配

而针对不同的屏幕分辨率，制作不同的素材是不现实的，所以就需要我们提供一套分辨率自适应的机制，来适配不同屏幕分辨率的设备。这篇博客就来介绍一下UGUI提供的分辨率自适应的机制。游戏中的分辨率自适应主要包括两部分：一是在不同尺寸的屏幕下，整体缩放比例的计算方式

微软信仰中心 / 0评论 2017-12-28

UGUI适配

而针对不同的屏幕分辨率，制作不同的素材是不现实的，所以就需要我们提供一套分辨率自适应的机制，来适配不同屏幕分辨率的设备。这篇博客就来介绍一下UGUI提供的分辨率自适应的机制。游戏中的分辨率自适应主要包括两部分：一是在不同尺寸的屏幕下，整体缩放比例的计算方式

微软信仰中心 / 0评论 2017-12-28

深入学习css之background属性

css中允许应用纯色作为背景，也允许使用图片作为背景。1，颜色关键字表示法，可直接用英文单词来定义，比如red，blue，green等。2，16进制表示法，用#000000到#ffffff区间内的16进制数来表示。3，三原色表示法，rgb,其中r,g,b分

UncleLeslie的看法 / 0评论 2017-12-20

奇妙的Javascript图片放大镜

在Flash中我们用蒙板加上一些简单的脚本便可实现一个动态的图片放大镜。我们通过移动“放大镜”时适当调整背景图的位置，使它显示的刚好是需要要放大的部分。然后再准备一个“放大镜”的图片，注意它中间部分必须是透明的，这里我们准备了一个绿色的方框 viewer.

Jscript / 0评论 2016-10-15