您的位置:时时app平台注册网站 > web前端 > 有趣的CSS题目(16): 奇妙的 background-clip: text

有趣的CSS题目(16): 奇妙的 background-clip: text

2019-10-11 04:43

何为 -webkit-background-clip:text

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

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

XHTML

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

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>

效果如下:

See the Pen background-clip:text by Chokcoco (@Chokcoco) on CodePen.

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

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

开本系列,谈谈一些有趣的 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题目(十五)-- 奇妙的 background-clip: text

所有题目汇总在我的 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;

 

关于作者:chokcoco

图片 1

经不住流年似水,逃不过此间少年。 个人主页 · 我的文章 · 63 ·    

图片 2

CodePen Demo

将文字设为透明 color: transparent

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

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

图片 3

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

CodePen Demo

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

各类效果制作

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

  1. 大大增强了文字的颜色填充选择
  2. 文字颜色的动画效果
  3. 配合其他元素,实现一些其他巧妙的用法
<div>Clip</div>
<style>
div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
}
</style>

 

图片窥探效果

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

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

CodePen Demo

See the Pen background-clip: text by Chokcoco (@Chokcoco) on CodePen.

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

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

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

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

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

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

所有题目汇总在我的 Github 。

  • 有趣的CSS题目(1): 左边竖条的实现方法
  • 有趣的CSS题目(2): 从条纹边框的实现谈盒子模型
  • 有趣的CSS题目(3): 层叠顺序与堆栈上下文知多少
  • 有趣的CSS题目(4): 从倒影说起,谈谈 CSS 继承 inherit
  • 有趣的CSS题目(5): 单行居中,两行居左,超过两行省略
  • 有趣的CSS题目(6): 全兼容的多列均匀布局问题
  • 有趣的CSS题目(7):消失的边界线问题
  • 有趣的CSS题目(8):纯CSS的导航栏Tab切换方案
  • 有趣的CSS题目(9):巧妙实现 CSS 斜线
  • 有趣的CSS题目(10):结构性伪类选择器
  • 有趣的CSS题目(11):reset.css 知多少?
  • 有趣的CSS题目(12):你该知道的字体 font-family
  • 有趣的CSS题目(13):巧妙地制作背景色渐变动画!
  • 有趣的CSS题目(14): 纯 CSS 方式实现 CSS 动画的暂停与播放!
  • 有趣的CSS题目(15): 谈谈 CSS 关键字 initial、inherit 和 unset

打赏支持我写出更多好文章,谢谢!

打赏作者

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

各类效果制作

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

 

将文字设为透明 color: transparent

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

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

1
2
3
4
div {
  color: transparent;
  -webkit-background-clip: text;
}

图片 4

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

CodePen Demo

See the Pen clip:text && color: transparent by Chokcoco (@Chokcoco) on CodePen.

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

CodePen Demo

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

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

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

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

CodePen Demo

有趣的CSS题目(16): 奇妙的 background-clip: text

2017/05/04 · CSS · background-clip

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

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

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

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

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

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;

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

图片窥探效果

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

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

CodePen Demo

 

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

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

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

奇妙的 background-clip: text,cssbackground-clip 开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什...

使用 -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; }

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

See the Pen background-clip:text by Chokcoco (@Chokcoco) on CodePen.

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

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

 

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 6 图片 7

4 赞 3 收藏 评论

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

何为 -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

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

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

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

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

CodePen Demo

See the Pen 背景渐变动画 && 文字裁剪 by Chokcoco (@Chokcoco) on CodePen.

大大增强了文字的颜色填充选择

使用 -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

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

实现文字渐变效果

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

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

CodePen Demo

See the Pen background-clip: text 文字渐变色 by Chokcoco (@Chokcoco) on CodePen.

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

 

将文字设为透明 color: transparent

实现文字渐变效果

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

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

CodePen Demo

 

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

 

图片窥探效果

效果如下:
CodePen Demo

文字颜色的动画效果

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

何为 -webkit-background-clip:text

640.png

图片 9

各类效果制作

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

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

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

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

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

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

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

实现文字渐变效果

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

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

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

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

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

所有题目汇总在我的 Github

CodePen Demo

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

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

最近在微信前端圈看到一篇写 background-clip 的文章,就搬过来给大家一起尝试下。

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

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

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

配合其他元素,实现一些其他巧妙的用法

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

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

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

本文由时时app平台注册网站发布于web前端,转载请注明出处:有趣的CSS题目(16): 奇妙的 background-clip: text

关键词: