谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法

谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目(七)-- 消失的边界线问题

谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

谈谈一些有趣的CSS题目(九)-- 巧妙的实现 CSS 斜线

谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

谈谈一些有趣的CSS题目(十一)-- reset.css知多少

谈谈一些有趣的CSS题目(十二)-- 深入探讨 CSS 特性检测 @supports 与 Modernizr

谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!

谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

所有题目汇总在我的 Github 。

正文从这里开始。说起 background-clip ,可能很多人都很陌生。Clip 的意思为修剪,那么从字面意思上理解,background-clip 的意思即是背景裁剪。

我曾经在 从条纹边框的实现谈盒子模型 一文中谈到了这个属性,感兴趣的可以回头看看。

简单而言,background-clip 的作用就是设置元素的背景(背景图片或颜色)的填充规则。

与 box-sizing 的取值非常类似,通常而言,它有 3 个取值:

{background-clip: border-box;  // 背景延伸到边框外沿(但是在边框之下)background-clip: padding-box; // 边框下面没有背景,即背景延伸到内边距外沿。background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
}

不过这些都不是本文的主角。本文的主角是 background-clip: text; ,当然现在只有 chrome 支持,所以通常想使用它,需要 -webkit-background-clip:text;

 

何为 -webkit-background-clip:text

使用了这个属性的意思是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

看个最简单的 Demo ,没有使用 -webkit-background-clip:text :

<div>Clip</div><style>
div {font-size: 180px;font-weight: bold;color: deeppink;background: url($img) no-repeat center center;background-size: cover;
}
</style>

效果如下:

CodePen Demo

 

使用 -webkit-background-clip:text

我们稍微改造下上面的代码,添加 -webkit-background-clip:text

div {font-size: 180px;font-weight: bold;color: deeppink;background: url($img) no-repeat center center;background-size: cover;-webkit-background-clip: text;
}

效果如下:

CodePen Demo

看到这里,可能有人就纳闷了,wtf啥玩意呢,这不就是文字设置 color 属性嘛。

 

将文字设为透明 color: transparent

别急!当然还有更有意思的,上面由于文字设置了颜色,挡住了 div 块的背景,如果将文字设置为透明呢?文字是可以设置为透明的 color: transparent 。

div {color: transparent;-webkit-background-clip: text;
}

效果如下(请在 Chrome 内核浏览器下观看):

CodePen Demo

通过将文字设置为透明,原本 div 的背景就显现出来了,而文字以为的区域全部被裁剪了,这就是 -webkit-background-clip:text 的作用。

 

各类效果制作

了解了最基本的用法,接下来可以想想如何去运用这个元素制作一些效果。

  1. 大大增强了文字的颜色填充选择
  2. 文字颜色的动画效果
  3. 配合其他元素,实现一些其他巧妙的用法

 

实现文字渐变效果

利用这个属性,我们可以十分便捷的实现文字的渐变色效果。

效果如下(请在 Chrome 内核浏览器下观看):

CodePen Demo

 

背景渐变动画 && 文字裁剪

因为有用到 background 属性,回忆一下,我在上一篇 巧妙地制作背景色渐变动画! 利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。

结合渐变动画,当然不一定需要过渡动画,这里我使用的是逐帧动画。配合 -webkit-background-clip:text,实现了一种,嗯,很红灯区的感觉。

效果如下(请在 Chrome 内核浏览器下观看): 

CodePen Demo

 

图片窥探效果

再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text,然后利用 animation 移动子 div ,去窥探图片。

效果如下(请在 Chrome 内核浏览器下观看):

CodePen Demo

 

其实还有很多有趣的用法,只要敢想并动手实践,会发现 CSS 真的乐趣挺多的。

当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282121.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第五周软件工程作业-每周例行报告

一、PSP T名称C内容ST开始时间ED结束时间中断时间/min实际时间/minScrum会议第一次Scrum会议10月13日11:3010月13日12:10040第二次Scrum会议10月14日15:3010月14日15:55025第三次Scrum会议10月15日13:3010月15日14:05035第四次Scrum会议10月16日11:3010月16日13:00090第五次Scr…

MySQL - 触发器

一、概述 Mysql 允许通过触发器、存储过程、函数的形式来存储代码。 触发器可以让你在执行 Insert、Update、Delete的时候&#xff0c;执行一些特定的操作。可以在Mysql中指定是在Sql语句执行之前触发还是执行后触发。 二、使用触发器需要注意的点 对每一个表的每一个事件&a…

Docker Desktop 可以直接启用Kubernetes 1.25 了

作为目前事实上的容器编排系统标准&#xff0c;K8s 无疑是现代云原生应用的基石&#xff0c;很多同学入门可能直接就被卡到第一关&#xff0c;从哪去弄个 K8s 的环境&#xff0c; Docker Desktop 自带了Kubernetes 服务&#xff0c;但是在过往的经验中就是用梯子也安装不了&…

截取url的host_java正则表达式获取url的host示例

java正则表达式获取url的host示例 复制代码 代码如下: public static String getHost(String url){if(url==null||url.trim().equals("")){return ""; } String host = ""; Pattern p = Pattern.compile("(?<=//|)((\\w)+\\.)+\\w+&qu…

MySQL - 视图

一、概述 Mysql 5.0 版本后开始引入视图。视图本身是一个虚拟表&#xff0c;不存放任何数据。在使用 sql 语句访问视图的时候&#xff0c;他返回的数据都是在查询过程中从其他表动态生成的。 二、使用视图   1、创建视图 CREATE VIEW comic_view as SELECT comic_id,name,pe…

Linux环境下压缩与解压命令大全

tar命令 解包&#xff1a;tar zxvf FileName.tar 打包&#xff1a;tar czvf FileName.tar DirName gz命令 解压1&#xff1a;gunzip FileName.gz 解压2&#xff1a;gzip -d FileName.gz 压缩&#xff1a;gzip FileName .tar.gz 和 .tgz 解压&#xff1a;tar zxvf FileName.tar.…

Centos 磁盘管理及配额管理

实验内容&#xff1a;一.添加两块硬盘&#xff0c;使用LVM做成VG01组&#xff0c;在该VG中新建两个LV。二.将这两个LV格式化为ext4/xfs&#xff0c;开机自动挂载到系统mnt1,mnt2目录下。三.lv02开启磁盘配额功能&#xff0c;用来进行用户与组分配额的实验。四.在系统里添加用户…

OnionArch - 采用DDD+CQRS+.Net 7.0实现的洋葱架构

博主最近失业在家&#xff0c;找工作之余&#xff0c;看了一些关于洋葱&#xff08;整洁&#xff09;架构的资料和项目&#xff0c;有感而发&#xff0c;自己动手写了个洋葱架构解决方案&#xff0c;起名叫OnionArch。基于最新的.Net 7.0 RC1, 数据库采用PostgreSQL, 目前实现了…

spark写出分布式的训练算法_利用 Spark 和 scikit-learn 将你的模型训练加快 100 倍...

在 Ibotta&#xff0c;我们训练了许多机器学习模型。这些模型为我们的推荐系统、搜索引擎、定价优化引擎、数据质量等提供动力。它们在与我们的移动应用程序交互时为数百万用户做出预测。当我们使用 Spark 进行数据处理时&#xff0c;我们首选的机器学习框架是 scikit-learn。随…

理解LinkedHashMap

1. LinkedHashMap概述&#xff1a;LinkedHashMap是HashMap的一个子类&#xff0c;它保留插入的顺序&#xff0c;如果需要输出的顺序和输入时的相同&#xff0c;那么就选用LinkedHashMap。LinkedHashMap是Map接口的哈希表和链接列表实现&#xff0c;具有可预知的迭代顺序。此实现…

MySQL - 锁

一、什么是锁 锁是数据库系统区别于文件系统的一个关键特性。锁机制用于管理对共享资源的并发访问。 二、MySQL 不同存储引擎支持的锁机制 存储引擎支持的锁类型Myisam表锁Innodb行锁、表锁Memory表锁BDB页锁、表锁表锁&#xff1a;直接锁住的是一个表&#xff0c;开销小&…

数据库时区那些事儿 - MySQL的时区处理

原文地址 当JVM时区和数据库时区不一致的时候&#xff0c;会发生什么&#xff1f;这个问题也许你从来没有注意过&#xff0c;但是当把Java程序容器化的时候&#xff0c;问题就浮现出来了&#xff0c;因为目前几乎所有的Docker Image的时区都是UTC。本文探究了MySQL及其JDBC驱动…

java_函数的重载

函数的重载&#xff08;Overload&#xff09;概念&#xff1a;在同一个类中&#xff0c;允许存在一个以上的同名函数&#xff0c;只要他们的参数个数或者参数类型不同即可。函数功能一样&#xff0c;仅仅是参与运算的未知内同不同时&#xff0c;可以定义多函数&#xff0c;却使…

全新升级的AOP框架Dora.Interception[2]: 基于约定的拦截器定义方式

Dora.Interception&#xff08;github地址&#xff0c;觉得不错不妨给一颗星&#xff09;有别于其他AOP框架的最大的一个特点就是采用针对“约定”的拦截器定义方式。如果我们为拦截器定义了一个接口或者基类&#xff0c;那么拦截方法将失去任意注册依赖服务的灵活性。除此之外…

redis watch使用场景_redis不得不会的事务玩法

我们都知道redis追求的是简单&#xff0c;快速&#xff0c;高效&#xff0c;在这种情况下也就拒绝了支持window平台&#xff0c;学sqlserver的时候&#xff0c;我们知道事务还算是个比较复杂的东西&#xff0c;所以这吊毛要是照搬到redis中去&#xff0c;理所当然redis就不是那…

加快Android Studio的编译速度

从Eclipse切换到Android Studio后&#xff0c;感觉Android Studio的build速度比Eclipse慢很多&#xff0c;以下几个方法可以提高Android Studio的编译速度使用Gradle 2.4Gradle 2.4对执行性能有很大的优化&#xff0c;但Android Studio现在默认使用的是Gradle 2.2,所以我们需要…

开发中 MySQL 规范

一、建表规范 1、数据库名、表名、字段名必须使用小写字母或数字&#xff0c;并且禁止以数字开头 示例&#xff1a;goods_category、agent_operate_201812_log 2、数据库名、表名、字段名要做到见名识意 示例&#xff1a;goods_category&#xff0c;不能 gc 3、配置表建议以 …

PaddleOCR在 Linux下的webAPI部署方案

很多小伙伴在使用OCR时都希望能采用API的方式调用&#xff0c;这样就可以跨端跨平台了。本文将介绍一种基于python的PaddleOCR识别WebAPI部署方案。喜欢的可以关注公众号&#xff0c;获取更多内容。一、 Linux环境下部署1.环境要求操作系统&#xff1a;CenterOS7&#xff1b;主…

影响程序员生涯的三个错误观念,你千万不要犯!

程序员在社会上&#xff0c;到底是怎样一个生活群体&#xff1f;是否能找到自己方向&#xff1f;其实&#xff0c;路一直都在那里&#xff0c;只是你看不到而已&#xff01; 当初的你&#xff0c;可能一直被一些技术牵着鼻子走&#xff0c;并不是自己在做着自己想做的&#xff…

心电图计算心率公式_心电图到底能反应啥问题,看过之后你也能当“医生”

只要是经历过健康体检的健康人&#xff0c;或者做过手术的患者&#xff0c;基本都做过心电图检查。都说久病成医&#xff0c;所以有些人对血、尿常规等各项检查的结果都门清儿得很&#xff0c;最起码看一眼也能说出个大概齐。偏偏心电图这种常做的检查&#xff0c;不但老病号如…