background-clip 实现图片文字效果

“The shortest distance between two people is a smile. ”

前言

UI:前端哥哥,帮我把这个图切了

image

我:好嘞,小case 等我10秒钟

UI:对了,效果要跟我一样,而且文字是不固定的

我:呃(mmp)...

好吧,有需求了我就要义不容辞的完成。毕竟我是有追求有理想的前端。

正文

根据效果图可以明确两个需求 自定义字体文字蒙版

既然目标明确,那就开干。

自定义字体

效果图上的字体是迷你简菱心 ,那先去下载好这个字体(百度一下你就知道)

下载好的字体一般是.ttf格式文件,但是并不是所有的浏览器都支持这种字体。这时就要转换字体,地址1:font2web,地址2:字客网。你可能会发现很多转换字体的地址但很少有能转换的,而且有些能转换又提示文件过大。

这个时候我们要做的操作就是删文字,没错就是删文字。用FontCreator打开字体文件

大概就是这样,然后删除你觉得用不到的文字吧。删除好再转换就OK啦!

现在就开始引入文字了css里加上以下代码

CSS
@font-face { font-family: 'MyCustomFont'; src: url('fontFileName.eot'); src: url('fontFileName.eot?#iefix') format('embedded-opentype'), url('fontFileName.woff') format('woff'), url('fontFileName.svg') format('svg'), url('fontFileName.ttf') format('truetype'); font-weight: normal; font-style: normal; }

页面应用字体

CSS
body{ font-family: 'MyCustomFont'; }

到此需求一完成

文字蒙版

到这里才算切入主题了。(急死我啦,我也不想跑题...)

要做的文字蒙版效果就是用的background-clip属性详细了解,应该更准确的说是background-clip:text属性值。
下面给例子感受一下background-clip属性的各个值(content-box | padding-box | border-box)的作用:

这里的text值就是我们想要的效果。

这里要注意的事设置background-clip:text的同时要把字体颜色设置为透明color: transparent这样底下的图片才能显示出来。(跟PS图层蒙板很像,蒙板越黑显示的图片越清楚。因为PS里黑色就是代表没有颜色)

最终效果

点我试试

拓展

现在我们可以轻松做一个歌词效果

天空灰的像哭过

后续

最近在同事们在使用的时候发现此效果在iOS下有时候没有效果,多次尝试之下才发现此效果不能与flex布局共用

【END】

本文链接:

版权声明:本blog所有文章除声明转载外,均采用 BY-NC-SA 3.0 许可协议。转载请注明来自 简单才是真

阅读 277 | 发布于 2020-05-26
暂无评论