CSS002. 字体穿透蒙层（用img设置字体的color）

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

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

大致思路如下：

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

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

但这种方法只限于规则图形，除非使用canvas，否则真正应用到不规则图形与字符上还是无法生效。

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

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

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

原来webkit内核提供了实现这一效果的API：

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

 

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

-webkit-text-fill-color: transparent

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

-webkit-background-clip: text

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

代码与最终实现效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>镂空测试</title>
    <style>
        *, body, html {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .container,h1{
            background:url("./bgTemp.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }
        .container::after{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .container h1 {
            position: absolute;
            white-space: pre-wrap;
            top: 28%;
            left: 28%;
            width: 100%;
            height: 100%;
            background-position: -28vw -28vh;
        }
        .container{
            position: relative;
            width: 100%;
            height: 100vh;
            background-position: 0 0;
        }
        .container::after{
            content: '';
            background: rgba(0,0,0,0.7);
        }
        h1{
            z-index: 2;
            font-size: 180px;
            user-select: none;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-text-stroke: .8px rgba(255, 255, 255, .8);
        }
    </style>
</head>
<body>

<div class="container">
    <h1>带恶人97z</h1>
</div>


</body>
</html>

 

- END -

posted @ 2021-02-23 16:20  97z4moon  阅读(895)  评论(0)    收藏  举报
Title