CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了,这两者还是有区别的。区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿,所以一起来看看能否解决这个问题。
![彦子](https://static.fequan.com/vueconf/img/default_avatar.png)
剪裁和遮罩都是用来隐藏元素的一些部分、显示其他部分的。当然了,这两者还是有区别的。区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异。但不幸的是总是有相当多的过时信息在那儿,所以一起来看看能否解决这个问题。
你也许能够熟练的使用PS对文本进行图像掩埋;一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像,你就可以在你的网站上使用;但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗?好消息是,确实可以!CSS介绍了background-clip
和 mask-image
的属性,或许你可以使用他们来创造相似的效果,就像你用PS创造出来的那样。最重要的是,你也可以使用SVG来进行文本图像剪辑。
记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果。
假设我告诉你,我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码,也没有使用图像(只是在html
元素上使用了background
设置了一个背景图片,只是为了表明这个元素有一些透明的部分),同样也没有使用JavaScript代码。你一定会觉得很神奇,对吧!有好奇之心,对于我们做前端的同学而言,应该一直都有,只有这样才能做出很多我们一直以为实现不了的效果,比如接下来要介绍的内容。
CSS的mask
(遮罩),有时也称CSS的蒙层,最早是苹果公司2008年提出的,并且添加到webkit
引擎当中。遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类型于png24
位或png32
位中的alpha
透明通道的效果。2012年被纳入到W3C的草案中,但这个版本与苹果公司提出的版本是不同的。时至今日,该规范已经有多个版本,现在是CSS Masking Module Level1版本,属于TR阶段。据Caniuse.com统计来讲,该属性得到的支持度还是有一定的限制,仅部分属性被浏览器支持。虽然如此,但该属性还是非常的有意思,值得大家花点时间去探究,比如今天要聊的mask-composite
属性就是非常有意思的一个属性。
最近业务中需要实现一些镂空的效果。看到这些效果我最初想到的是通过CSS的mask
和clip-path
来实现,甚至还想结合SVG相关的特性。为了验证自己的一些想法,开始着手撸码,但问题来了,在撸码的过程中,我发现自己对于mask
的相关特性理解的还不够透彻。因此重新阅读CSS Masking Module Level 1规范中的文档和相关教程。才发现原来CSS Masking是如此的强大。下面是我自己对CSS Masking模块的一些理解,希望对大家学习和了解该功能模块有所帮助。
探索CSS Masking模块主要分为Clipping和Masking两个部分,在上一节中,花了很大的篇幅介绍了Clipping相关的特性,今天接着来学习或者聊聊Masking相关的知识点。从上一节中我们知道,在Masking中有一个遮罩层,这个遮罩层是一个图像,该层也被称为遮罩模式,主要有高亮和Alpha两种模式。其中Alpha模式带有alpha
通道的图像,alpha
通道包含在每个像素数据中的透明信息。最简单的示例就是带有黑色和透明区域的PNG图像,其中黑色部分将会显示,透明区域内容将会被隐藏。
前面花了很长的篇幅在《探索CSS Masking模块:Clipping》和《探索CSS Masking模块:Masking》两文中分两部分详细介绍了CSS Masking Module Level 1中的Clipping和Masking的基础知识和相关特性,并且使用一些简单的小示例向大家演示了Clipping和Masking如何使用。
在Web中给文本添加下划线常常出现在<a>
链接的文本上,早期一般使用text-decoration
属性给文本添加下划线、删除线等。除了text-decoration
之外,CSS还有很多技术方案可以给文本添加下划线效果,比如border-bottom
、box-shadow
、background-image
等。对于Web开发者而言,更庆幸的是,CSS还有更多的,更灵活的特性实现文本下划线的效果。在这篇文章中,将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。