酷炫字体背景图的实现——神奇的background-clip: text
Posted chenwenhao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了酷炫字体背景图的实现——神奇的background-clip: text相关的知识，希望对你有一定的参考价值。
愉快的时光总是飞快，七天小长假已接近尾声，抓住假期的尾巴，再学个新知识点——css的background-clip: text属性...会不会有种陌生的感觉，毕竟在我们的印象里，background-clip只有padding-box、border-box、content-box三个属性，这个text是个什么鬼？？？没用过没关系，今天就来看看它用什么妙用...
background-clip的定义：规定背景的绘制区域；简而言之，background-clip就是规定background-color/background-image背景（色/图）在盒模型里的作用范围...
清楚了background-clip的定义，就可以放心的使用了...不过还要说明一点——兼容性，background-clip:text属性目前只有chrome浏览器支持较好，其他内核的不支持...这个注意就行了，使用的时候这么写： -webkit-background-clip:text;接下来看看这个属性是如何实现字体背景图的...
开始之前，先来看一个酷炫的效果，看懂这个就基本不用往下看了...毕竟也不难，注意几个地方就行了...传送链接：https://jsbin.com/tisodirawi/edit?html,output
使用了这个属性的意思是：以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉...
使用背景图片时：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>background-clip</title> <style> div { margin: auto; width: 1000px; height: 300px; line-height: 300px; text-align: center; font-size: 120px; font-weight: bold; color: transparent; /* 重点1 */ background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493353832&di=c063b6b9c89082e96ffee0766112ffec&imgtype=jpg&er=1&src=http%3A%2F%2Fpic2016.5442.com%3A82%2F2016%2F0111%2F07%2F3.jpg%21960.jpg") no-repeat center center; background-size: cover; -webkit-background-clip: text; /* 重点2 */ } </style> </head> <body> <div>background-clip</div> </body> </html>
总结：背景属性设置background-clip：text，同时字体颜色color:transparent；用背景色填充字体颜色...即可
参考链接：http://web.jobbole.com/91212/?tdsourcetag=s_pctim_aiomsg（推荐必看）
以上是关于酷炫字体背景图的实现——神奇的background-clip: text的主要内容，如果未能解决你的问题，请参考以下文章