首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
V2EX  ›  CSS

CSS 题目系列(4) - 文字穿透遮罩层

  •  
  •   4ark · 89 天前 · 330 次点击
    这是一个创建于 89 天前的主题,其中的信息可能已经有所发展或是发生改变。

    描述

    在我刚开始学习前端开发不久的时候,曾在一个网站看到过一个效果,当时费尽脑筋,又是Canvas、又是SVG,还是无法实现(其实SVG好像是有办法可以实现的,但当时觉得麻烦就没弄)。

    效果就是这样的:

    这个效果的难点在于,如何让文字穿透过遮罩层,但是这样好像很难。

    直到最近,我看到了张鑫旭大神的一篇文章,文中讲述了如何给文字添加背景颜色(也可以是背景图片),顿时醍醐灌顶,想到了这样一个解决方案:

    1. 里外两个层,尺寸一样,设置同一个背景图片。
    2. 外层通过伪元素实现遮罩。
    3. 里层绝对定位,将背景添加到文字上。

    可能我文字表达地不是很清晰,下面用代码讲解一下。

    正文

    如果你点进了上面张鑫旭大神的那篇文章,你就知道主要是两行:

    1. -webkit-text-fill-color: transparent
    2. -webkit-background-clip: text

    简单说一下作用:

    -webkit-text-fill-color: transparent

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

    -webkit-background-clip: text

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

    那么,下面我们试一下实现,这里只展示主要代码。

    <div class="container">
    	<h1>I ❤ CSS</h1>
    </div>
    

    样式部分

    .container,h1{
        background:url("https://gd4ark.github.io/CSS-Carousel/image/2.jpg");
        background-size: 100% 100%;
    }
    .container h1,
    .container::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .container{
        position: relative;
        width: 100%;
        height: 100vh;
    }
    .container::after{
        content: '';
        background: rgba(0,0,0,0.8);
    }
    h1{
        z-index: 2;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    

    在线查看,可以修改文字哦: 链接

    完整代码:链接

    后记

    没错,这个困扰我多年的效果就是这么简单,果然还是懂得少,哪知道张鑫旭大神早在2011年就给出了答案。

    注:此文为原创文章,如需转载,请注明出处。

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2265 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 17ms · UTC 02:14 · PVG 10:14 · LAX 19:14 · JFK 22:14
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1