谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS
题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节。
解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。
不断更新,不断更新,不断更新,重要的事情说三遍。
谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit
谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
谈谈一些有趣的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>
效果如下:
使用 -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;
}
效果如下:
看到这里,可能有人就纳闷了,啥玩意呢,这不就是文字设置 color
属性嘛。
将文字设为透明 color: transparent
别急!当然还有更有意思的,上面由于文字设置了颜色,挡住了 div 块的背景,如果将文字设置为透明呢?文字是可以设置为透明的 color: transparent
。
div {
color: transparent;
-webkit-background-clip: text;
}
效果如下(请在 Chrome 内核浏览器下观看):
通过将文字设置为透明,原本 div 的背景就显现出来了,而文字以为的区域全部被裁剪了,这就是 -webkit-background-clip:text
的作用。
各类效果制作
了解了最基本的用法,接下来可以想想如何去运用这个元素制作一些效果。
- 大大增强了文字的颜色填充选择
- 文字颜色的动画效果
- 配合其他元素,实现一些其他巧妙的用法
实现文字渐变效果
利用这个属性,我们可以十分便捷的实现文字的渐变色效果。
效果如下(请在 Chrome 内核浏览器下观看):
背景渐变动画 && 文字裁剪
因为有用到 background
属性,回忆一下,我在上一篇 巧妙地制作背景色渐变动画! 利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。
结合渐变动画,当然不一定需要过渡动画,这里我使用的是逐帧动画。配合 -webkit-background-clip:text
,实现了一种,嗯,很红灯区的感觉。
效果如下(请在 Chrome 内核浏览器下观看):
图片窥探效果
再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text
,然后利用 animation
移动子 div ,去窥探图片。
效果如下(请在 Chrome 内核浏览器下观看):
其实还有很多有趣的用法,只要敢想并动手实践,会发现 CSS 真的乐趣挺多的。
当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text的更多相关文章
- 谈谈一些有趣的CSS题目(六)-- 全兼容的多列均匀布局问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十五)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- Loadrunner 11.00录制App脚本篇(Win10)
参考博文1:https://www.cnblogs.com/mxqh2016/p/6016866.html 参考博文2:https://blog.csdn.net/myohmy2008/article ...
- mysql执行计划id为空—UNION关键字
简介 UNION 操作符用于合并两个或多个 SELECT 语句的结果集.例如,我有两个表,表1记录的是公司男员工的数据,包括年龄.姓名.职位.表2记录的是公司女员工的数据,包括姓名.家庭住址.手机号等 ...
- Subplot 多合一显示
1.均匀图中图 matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. 使用import导入matplotlib.pyplot模块, 并简写成plt ...
- How to Reset VW Steering Assist 1S1909144P with OBDSTAR X300 DP
Vehicle model:VW Polo 2015 (or other Audi, Seat, Skoda, VW with unit 1S1 909 144 P) Module:Control u ...
- Python基础与进阶
1 Python基础与进阶 欢迎来到Python世界 搭建编程环境 变量 | 字符串 | 注释 | 错误消除 他只用一张图,就把Python中的列表拿下了! 使用 If 语句进行条件测试 使用字典更准 ...
- pytest 一.安装和使用入门
pytest --fixtures Python版本: Python 2.7.3.4.3.5.3.6.Jython.PyPy-2.3 平台:Unix / Posix和windows PyPI包名称:p ...
- nsq 初试
nsqlookupd tcp 4160 http 4161nsqd 4150nsqadmin 4171 1:安装$ brew install nsq1) 停止nsq默认的启动$ brew servic ...
- 实际操作--create DB link
我可以查看6D1数据库中的表了:我在哪个表里创建database说明我想访问database中的表~ SELECT * FROM TEST001MX@TESTLINK1 databa ...
- 无符号1byte转int
在java基本类型中byte是有正负之分,它的取值范围-128到127,有时候在网络编程里我们只需要正数,于是会约定1byte是无符号的,它的取值范围在255-0.那么我们怎么将无符号的1byte转为 ...
- ajax 与jsp servlet
jQuery的Ajax实现异步传输List.Map_GOOD 分类: JAVA WEB前端2013-08-29 18:35 6296人阅读 评论(0) 收藏 举报 javajquerylistjson ...