之前在逛Apple Store时看到了下面的UI：

交互图标非常圆滑上手也很舒服，虽然背景底色本就是白底，但是只依赖css能不能使  “+” 穿透背景看到底色 ？

大致思路如下：

一开始的思路是将内容主体呈现为透明色，再赋予子元素一个 固定宽高 和 box-shadow: 0 0 0 2021px #fff; 父容器 overflow: hidden;

通过足够大的不模糊阴影实现一个假的背景色，内容主体部分仍然为透明，造成一种伪穿透的效果。

但这种方法只限于规则图形，真正应用到字符上还是无法生效。

---

最终只能回到最原始的方法，将字体颜色调成与背景色一致，达到三个层级伪穿透的效果。

但我一开始想做出的效果就是字符穿透看到渐变色的背景或者图片。似乎与脑中的transparent和overflow没有半毛关系。

于是我找到了这篇文章 CSS题目系列（4） - 文字穿透遮罩层

原来webkit内核提供了方法实现这一效果：

-webkit-text-fill-color: transparent
-webkit-background-clip: text

（ 以下部分来自转载内容 ）

-webkit-text-fill-color: transparent

将文字颜色变成透明，但是经过尝试，发现使用color：transparent效果也一样，应该是浏览器为向后兼容所拟定的一个新属性，因为如果不支持文字添加背景，但又通过color：transparent将文字变成了透明，文字就显示不出来了。

-webkit-background-clip: text

背景被裁剪为文字的前景色。

---

代码与最终实现效果：

- END -