说起 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>
JS中文网 – 前端进阶资源分享 www.javascriptc.com 趣聊CSS系列
<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;
}
效果如下:
通过将文字设置为透明,原本 div 的背景就显现出来了,而文字以为的区域全部被裁剪了,这就是 -webkit-background-clip:text
的作用。
嗨起来
了解了最基本的用法,接下来可以想想如何去运用这个元素制作一些效果。
- 大大增强了文字的颜色填充选择
- 文字颜色的动画效果
- 配合其他元素,实现一些其他巧妙的用法
实现文字渐变效果
利用这个属性,我们可以十分便捷的实现文字的渐变色效果。
背景渐变动画 && 文字裁剪
因为有用到 background
属性,回忆一下,我在上一篇 巧妙地制作背景色渐变动画! 利用了渐变 + animation 巧妙的实现了一些背景的渐变动画。可以很好的和本文的知识结合起来。
结合渐变动画,当然不一定需要过渡动画,这里我使用的是逐帧动画。配合 -webkit-background-clip:text
,实现了一种,嗯,很红灯区的感觉
按钮填充效果
运用这个属性,我们可以给按钮实现这样一种遮罩填充动画(主要是用于防止文字闪烁):
图片窥探效果
再演示其中一个用法,利用两个 div 层一起使用,设置相同的背景图片,父 div 层设置图片模糊,其中子 div 设置 -webkit-background-clip:text
,然后利用 animation
移动子 div ,去窥探图片:
CodePen Demo JS中文网(www.javascriptc.com)是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区.
其实还有很多有趣的用法,只有敢想并动手实践。当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。
https://github.com/chokcoco/iCSS/issues/14
https://github.com/chokcoco/iCSS/issues/12
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com
标题:【趣聊Css-11】奇妙的-webkit-background-clip: text 属性
链接:https://www.javascriptc.com/554.html
原文链接:https://github.com/chokcoco/iCSS/issues/14