琢磨一些有意思的CSS标题

有趣的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;

近来在微信前端圈看到一篇写 background-clip
的小说,就搬过来给我们一同尝试下。

商量一些诙谐的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;

 

开本序列,谈谈一些妙趣横生的 CSS 标题,标题类型天马行空,想到什么说怎么着,不仅为了加大一下消除难题的思绪,更波及部分简单忽略的
CSS 细节。

何为 -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 ,只怕过多少人都很生疏。Clip
的趣味为修剪,那么从字面意思上精晓,background-clip 的意趣即是背景裁剪。

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

解题不考虑包容性,题目天马行空,想到怎样说什么样,如若解题中有你感觉到生僻的
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.

见到此间,恐怕有人就纳闷了,亚洲必赢官网 1什么东西呢,那不就是文字设置 color 属性嘛。

自个儿早就在 幽默的 CSS 标题(2):
从条纹边框的落到实处谈盒子模型
一文中谈到了这一个个性,感兴趣的可以回头看看。

 

不断更新,不断更新,不断更新,首要的业务说一遍。

将文字设为透明 color: transparent

别急!当然还有更好玩的,上面由于文字设置了颜色,挡住了 div
块的背景,如若将文字设置为透明吗?文字是足以设置为透明的 color: transparent 。

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

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

亚洲必赢官网 2

成效如下(琢磨一些有意思的CSS标题。请在 Chrome 内核浏览器下看到):

CodePen Demo

See the Pen 亚洲必赢官网 ,clip:text && color:
transparent by Chokcoco
(@Chokcoco) on
CodePen.

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

一言以蔽之而言,background-clip
的成效就是安装成分的背景(背景图片或颜色)的填充规则。

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

旁观这里,只怕有人就纳闷了,亚洲必赢官网 3什么东西呢,那不就是文字设置 color 属性嘛。

议论一些诙谐的CSS标题(一)–
左侧竖条的已毕格局

各项成效制作

刺探了最基本的用法,接下去可以考虑什么去行使这么些成分制作一些效用。

  1. 大大升高了文字的颜料填充选拔
  2. 文字颜色的动画效果
  3. 合作其余因素,完毕部分其余巧妙的用法

与 box-sizing 的取值分外接近,日常而言,它有 3 个取值:

 

探讨一些好玩的CSS标题(二)–
从条纹边框的落实谈盒子模型

落到实处文字渐变效果

采用那天性格,大家可以万分便捷的完毕文字的渐变色效果。

效益如下(请在 Chrome 内核浏览器下观察):

CodePen Demo

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) 外沿。
}

将文字设为透明 color: transparent

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

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

亚洲必赢官网 4

作用如下(请在 Chrome 内核浏览器下观望):

CodePen Demo

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

议论一些有趣的CSS标题(三)–
层叠顺序与堆栈上下文知多少

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

因为有用到 background 属性,纪念一下,小编在上一篇 高超地创设背景象渐变动画! 利用了渐变 + animation 巧妙的落到实处了有个别背景的渐变动画。可以很好的和本文的知识结合起来。

组成渐变动画,当然不肯定要求衔接动画,那里小编使用的是逐帧动画。合营 -webkit-background-clip:text,落成了一种,嗯,很红灯区的感觉。

功效如下(请在 Chrome 内核浏览器下见到):

CodePen Demo

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

但是这几个都不是本文的台柱。本文的台柱是 background-clip: text;
,当然今后唯有 chrome 辅助,所以普通想使用它,需求-webkit-background-clip:text;。

 

议论一些诙谐的CSS标题(四)–
从倒影说起,谈谈 CSS 继承
inherit

图形窥探效果

再演示其中一个用法,利用五个 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

打赏资助作者写出更加多好小说,多谢!

打赏小编

何为 -webkit-background-clip:text

各个功用制作

打探了最核心的用法,接下去可以考虑怎么去行使那几个成分制作一些效应。

 

座谈一些有意思的CSS标题(五)–
单行居中,两行居左,当先两行省略

打赏帮衬自身写出更加多好文章,多谢!

任选一种支付格局

亚洲必赢官网 5
亚洲必赢官网 6

4 赞 3 收藏
评论

接纳了这些特性的情致是,以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。

兑现文字渐变效果

动用这么些性子,我们得以万分便利的达成文字的渐变色效果。

功效如下(请在 Chrome 内核浏览器下观望):

CodePen Demo

 

座谈一些好玩的CSS标题(六)–
全包容的多列均匀布局难题

至于作者:chokcoco

亚洲必赢官网 7

经不住大运似水,逃但是此间少年。

个人主页 ·
我的篇章 ·
63 ·
   

亚洲必赢官网 8

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

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

因为有用到 background 属性,记忆一下,作者在上一篇 巧妙地创制背景观渐变动画! 利用了渐变 + animation 巧妙的兑现了有些背景的渐变动画。可以很好的和本文的文化结合起来。

构成渐变动画,当然不肯定需求衔接动画,那里作者使用的是逐帧动画。协作 -webkit-background-clip:text,完成了一种,嗯,很红灯区的感觉到。

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

CodePen Demo

议论一些妙趣横生的CSS标题(七)–
消失的边界线难点

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

 

议论一些诙谐的CSS标题(八)–
纯CSS的领航栏Tab切换方案

成效如下:
CodePen
Demo

图表窥探效果

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

效益如下(请在 Chrome 内核浏览器下见到):

CodePen Demo

 

事实上还有为数不少有趣的用法,只要敢想并早先实践,会发觉 CSS 真的意趣挺多的。

理所当然很三人会吐槽那几个性子的包容性,确实,作者个人认为前端今后的生态有几许面向今后编程的觉得(调戏)。可是提前明白完全而言利大于弊,多多拓宽本身的视野。

到此本文为止,借使还有哪些疑点如故指出,可以多多沟通,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

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

座谈一些有意思的CSS标题(九)–
巧妙的达成 CSS
斜线

看样子那里,恐怕有人就纳闷了,wtf啥玩意儿呢,那不就是文字设置 color 属性嘛。

议论一些有意思的CSS题目(十)–
结构性伪类选取器

将文字设为透明 color: transparent

切磋一些诙谐的CSS标题(十一)–
reset.css知多少

别急!当然还有更好玩的,上边由于文字设置了颜色,挡住了 div
块的背景,若是将文字设置为透明吗?文字是足以设置为透明的 color:
transparent 。

座谈一些有意思的CSS标题(十二)– 深刻探究CSS 本性检测 @supports 与
Modernizr

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

座谈一些好玩的CSS题目(十三)– 巧妙地创制背景象渐变动画!

亚洲必赢官网 9

议论一些有意思的CSS标题(十四)–
纯 CSS 格局落成 CSS
动画的中止与广播!

640.png

议论一些有趣的CSS标题(十五)– 谈谈
CSS 关键字 initial、inherit 和
unset

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

具备标题汇总在自身的 Github 。

透过将文字设置为透明,原本 div
的背景就显现出来了,而文字以为的区域所有被裁剪了,那就是
-webkit-background-clip:text 的意义。

正文从此处发轫。说起 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

功效如下(请在 Chrome 内核浏览器下观望):

 

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

总的来看此间,或许有人就纳闷了,亚洲必赢官网 10什么东西呢,那不就是文字设置 color 属性嘛。

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

 

因为有用到 background 属性,纪念一下,作者在上一篇 有意思的 CSS
标题(13):巧妙地创建背景象渐变动画!
利用了渐变 + animation
巧妙的落到实处了有个别背景的渐变动画。能够很好的和本文的学问结合起来。

将文字设为透明 color: transparent

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

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

亚洲必赢官网 11

职能如下(请在
Chrome 内核浏览器下见到
):

CodePen
Demo

由此将文字设置为透明,原本
div
的背景就显现出来了,而文字以为的区域所有被裁剪了,那就是 -webkit-background-clip:text 的作用。

组合渐变动画,当然不必然须求衔接动画,那里作者利用的是逐帧动画。同盟-webkit-background-clip:text,完毕了一种,嗯,很红灯区的感到。

 

功用如下(请在 Chrome 内核浏览器下看到):

各个作用制作

询问了最宗旨的用法,接下去可以考虑什么去行使那一个成分制作一些效益。

  1. 大大升高了文字的水彩填充拔取
  2. 文字颜色的动画片效果
  3. 匹配其余因素,达成部分任何巧妙的用法

 

CodePen
Demo

贯彻文字渐变效果

动用那天特性,大家得以丰硕简便的完成文字的渐变色效果。

效益如下(请在
Chrome 内核浏览器下观察
):

CodePen
Demo

 

图表窥探效果

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

因为有用到 background 属性,回想一下,小编在上一篇 高强地打造背景观渐变动画! 利用了渐变 + animation 巧妙的达成了有的背景的渐变动画。可以很好的和本文的学识结合起来。

结缘渐变动画,当然不必然要求连接动画,那里本人利用的是逐帧动画。合作 -webkit-background-clip:text,完结了一种,嗯,很红灯区的觉得。

职能如下(请在
Chrome 内核浏览器下见到
): 

CodePen
Demo

再演示其中三个用法,利用多个 div 层一起使用,设置同样的背景图片,父 div
层设置图片模糊,其中子 div 设置 -webkit-background-clip:text,然后采纳animation 移动子 div ,去偷看图片。

 

作用如下(请在 Chrome 内核浏览器下看看):

图表窥探效果

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

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

CodePen
Demo

 

骨子里还有好多有意思的用法,只要敢想并下手实践,会意识
CSS 真的乐趣挺多的。

理所当然很几人会吐槽那些性情的包容性,确实,笔者个人认为前端未来的生态有好几面向现在编程的感到(调戏)。不过提前明白完全而言利大于弊,多多拓宽自个儿的视野。

到此本文截至,如若还有如何疑难照旧提出,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

CodePen
Demo

实际还有很多幽默的用法,只要敢想并发轫实践,会发现 CSS 真的意趣挺多的。

当然很多人会吐槽那特性格的包容性,确实,作者个人觉得前端以后的生态有某个面向今后编程的感觉到(调戏)。但是提前精晓完全而言利大于弊,多多拓宽自个儿的视野。

到此本文为止,如若还有怎么着疑点如故提议,可以多多沟通,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

开本连串,谈谈一些诙谐的 CSS
标题,标题类型天马行空,想到什么说怎样,不仅为了推广一下消除难点的笔触,更波及部分便于忽略的
CSS 细节。

解题不考虑包容性,标题天马行空,想到怎样说什么样,如若解题中有你感到到生僻的
CSS 属性,赶紧去补习一下呢。

不断更新,不断更新,不断更新,紧要的政工说五遍。

拥有题目汇总在本人的
Github

网站地图xml地图