谈谈一些有趣的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题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十三)-- 巧妙地制作背景色渐变动画!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目(十七)-- 不可思议的颜色混合模式 mix-blend-mode
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- css布局与盒子模型
一. 盒子模型 注: 1.红色为border; 2.背景应用于内容.内边距.边框组成的区域: 3.Width和height指的是内容区域的高度和宽度. 边框属性: 1. padding属性:( ...
- 去除IOS浏览器下面的工具栏
在head标签里添加下面的元素 即可 <meta id="viewport" name="viewport" content="width=de ...
- TensorFlow anaconda命令备忘
[查看tensorflow安装的版本] anaconda search -t conda tensorflow [选择版本安装] conda install -c anaconda tensorflo ...
- NGINX下配置CACHE-CONTROL
HTTP协议的Cache -Control指定请求和响应遵循的缓存机制.在请求消息或响应消息中设置 Cache-Control并不会影响另一个消息处理过程中的缓存处理过程.请求时的缓存指令包括no-c ...
- waypoints
http://imakewebthings.com/waypoints waypoints 滑冰122分钟 Cygwin http:/nxutils.sourceforge.net http://ba ...
- response.getWriter().write()与out.print()的区别(转)
1.首先介绍write()和print()方法的区别: (1).write():仅支持输出字符类型数据,字符.字符数组.字符串等 (2).print():可以将各种类型(包括Object)的数据通 ...
- C#研究OpenXML之路(4-使用第三方库)
一.悲催的OpenXML操作 学习并使用了一段时间的OpenXML,感觉用这个来操作Excel文件真是一件非常悲催的事情,由于我自己比较熟悉Excel COM的操作,但到了OpenXML中发现,之前所 ...
- 查找及修改日程管理系统中的bug
1.Java没有分包都糅合在一起 2.在登录界面,没有输入账号密码,点击登录按钮时程序会崩溃,需要给给用户名和密码添加Toast (注:由于程序没有运行出来,所以是搭档孙刘兰的截图) 3.Regist ...
- 20155304 实验一《Java开发环境的熟悉》实验报告
20155304 实验一实验报告 实验一 Java开发环境的熟悉 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA编译.编译.运行.调试Java程序. 实验步骤 (一)命令行下 ...
- Webdriver API之操作(二)
一.窗口截图 dirver.get_screenshot_as_file("D:\\report\\image\\xxx.jpg") 二.关闭窗口 dirver.close() # ...