开本系列,谈谈一些有趣的 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 个取值:
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
>
|
效果如下:
使用 -webkit-background-clip:text
我们稍微改造下上面的代码,添加 -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;
}
|
效果如下:
看到这里,可能有人就纳闷了,啥玩意呢,这不就是文字设置
color
属性嘛。
将文字设为透明 color: transparent
别急!当然还有更有意思的,上面由于文字设置了颜色,挡住了 div 块的背景,如果将文字设置为透明呢?文字是可以设置为透明的 color: transparent
。
1
2
3
4
|
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 真的乐趣挺多的。
当然很多人会吐槽这个属性的兼容性,确实,我个人觉得前端现在的生态有一点面向未来编程的感觉(调戏)。不过提前掌握总体而言利大于弊,多多拓宽自己的视野。
到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
本文转自ChokCoco博客园博客,原文链接:http://www.cnblogs.com/coco1s/p/6802374.html