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

本文转载自:https://www.cnblogs.com/coco1s/p/6802374.html

开本系列,谈谈一些有趣的 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 个取值:

1
2
3
4
5
{
    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 :

1
2
3
4
5
6
7
8
9
10
11
<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

1
2
3
4
5
6
7
8
div {
  font-size180px;
  font-weightbold;
  color: deeppink;
  backgroundurl($img) no-repeat center center;
  background-size: cover;
  -webkit-background-clip: text;
}

效果如下:

CodePen Demo

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

将文字设为透明 color: transparent

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

1
2
3
4
div {
  colortransparent;
  -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 真的乐趣挺多的。

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

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

如果觉得此文对你有帮助,赏杯咖啡,鼓励Ta创作出更多优秀文章!
打赏