用CSS把文字显示成哆啦A梦

先看一下最终效果
左面是最终效果，右面是原图

先说说要实现这个效果使用的方法:background-clip

一、background-clip介绍

background-clip：按照MDN上说的，“设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面”

简单的说，就是你设置的背景图片，如何裁剪背景图片，或者说如何填满它所在的容器

看例子，现在有这么个样式

计算样式如下

它的CSS如下

p {border: 10px red;border-style: dotted double;width:380px;height: 220px;  background: url("v.png");overflow: hidden;position:absolute;top:100px;left: 100px;padding: 10px;
}

HTML如下

<p></p>

可以看到，你的图片，不仅填满p标签，而且把padding,和边框也都填满了，比如你就不想让它填满，怎么办？

这就需要background-clip属性了，background-clip，有如下几个值

background-clip: border-box

这个就是background-clip的默认属性了，上面的CSS虽然没有写，background-clip属性，默认就是border-box

它表示背景的显示区域要包括padding和边框，效果就如上图所示

background-clip: padding-box

它表示背景的显示区域要包括padding，但不包括border,效果如下

background-clip: content-box

它表示背景的显示区域同时不包括padding、border,也就是说，容器多大就显示多大，效果就如下

background-clip: text

这就是重点了，把上面的CSS改一改，不用PNG图片了用背景色

p {  border: 10px red;  border-style: dotted double;  width:380px;  height: 220px;    background: linear-gradient(60deg, red, yellow, red, yellow, red);  overflow: hidden;  position:absolute;  top:100px;  left: 100px;  padding: 10px;  font:140px sans-serif;  color: rgba(0,0,0,.2);
}

现在这个样式显示如下

好，然后在P标签内写入几个字母

<p>ABCD</p>

然后显示成这样了

没啥问题，然后，在p样式里加入-webkit-background-clip: text;

看效果。是不是背景不见了，全都以文字的样式，填充到文字了

这就是background-clip: text的作用，关于为什么要写-webkit-background-clip: text，不写background-clip: text ,因为是chrome浏览器，不支持background-clip: text这种写法，只能写-webkit-background-clip,firefox下直接background-clip,就可以

二、如何用background-clip把文字显示成哆啦A梦

有了上述知识，要实现这个就简单了

首先我们先准备一张，背景透明的哆啦A梦PNG图片,如下

然后把它作为P标签的背景图片，写如下样式

p {width:200px;height: 256px;  background: url("a.png");overflow: hidden;-webkit-background-clip: text;background-clip: text;color: transparent;font-size: 0.5rem;background-size: cover;
}

然后，再把页面背景色搞成黑色的

body {background-color: #000000;
}

最后，在P标签内填充文字，要多写，把整个P填满了

<p>哆啦A梦哆啦A梦.....(多写)</p>

然后保存，浏览

效果就出来了