纯 css 实现炫酷的视频文本蒙版效果

2022 年 7 月 16 日
本文字数：2309 字
阅读完需：约 8 分钟

前言

UI 妹子给提了一个效果，要求视频上方有文字，只有文字部分可以看到下面的视频，非文字部分看到不到视频，类似于 PS 中的蒙版效果。我寻思着那要这这视频有何用？但看着 UI 妹子扑棱扑棱期待着的大眼睛，我没把自己的寻思说出口，而是说：成，等着瞧吧！

之所以这么有保证，是因为之前在苹果官网上看到过类似的效果，只不过是图片和文字的蒙版效果，其中用到了一个特别有意思的 css 属性，所以实现起来还是很简单的，我几分钟就搞定了，来跟我一起基于这个属性来做一个炫酷的纯 css 视频文本蒙版效果吧~

mix-blend-mode 属性

要实现蒙版效果，最重要的就是mix-blend-mode属性了，官方文档说：这个属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。是不是看不太明白一脸懵？没关系，让我们来看看它的属性值：

mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原

是不是更懵了？哈哈哈😵如果有 PS 基础的小伙伴应该很容易理解关于上面这些属性的含义，如果没有也没关系，可以一条条试试看效果。

由上面的属性我们可以判断出很多在线网站的照片滤镜，也是基于这个属性做出来的，所以应用还是蛮广的。了解了上面的属性，我们来搭建 html 结构：

DOM 结构

DOM 页面结构应该是一个盒子里面包括了一个视频和一段文字，文字和视频应该是重叠的，且都应该占满盒子，所以盒子我给了相对定位，文字和视频都是绝对定位，且占满空间。因为文字要在视频上方，所以文字 p 标签应该在 video 标签的下面。所以我首先是这么写的：

    <style>      .box{        width: 700px;        height: 500px;        position: relative;      }      video,      p{        width: 100%;        height: 100%;        position: absolute;        top: 0;        left: 0;      }      p{        font-size: 200px;        font-weight: 700;        line-height: 500px;        text-align: center;        background: white;      }    </style>    <div class="box">      <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">        <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />      </video>      <p>PEPSI</p>    </div>

复制代码

运行看一下：

啊哈，已经成功一半了，我们给 p 标签加上mix-blend-mode: screen;看一下：

大功告成！！！

当然，作为一名优秀的前端开发者，即使是一个小 demo，我们也要做的尽善尽美，比如现在这个字体看起来就比较丑，所以我想要再换个字体。

@font-face 规则

作为 css3 的高级属性，@font-face 实在是太低调了，可是不得不承认它的强大，改版字体什么的轻轻松松。关于它详细的属性值含义，w3school有详细的介绍，这里我们来简单看一下它的设置：

font-family 必需。规定字体的名称。
src 必需。定义字体文件的 URL。

是不是特别简单？我又去阿里巴巴矢量图标库的iconfont-webfont平台找了一款在线字体，一番引入设置：

    <style>      @font-face {        font-family: 'webfont';        src: url('//at.alicdn.com/t/webfont_9fm5seiutdt.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/webfont_9fm5seiutdt.svg#杨任东竹石体-Bold') format('svg');      }      .box{        width: 700px;        height: 500px;        position: relative;      }      video,      i {        width: 100%;        height: 100%;        position: absolute;        top: 0;        left: 0;      }      i{        display: block;        font-family: webfont;        font-size: 200px;        font-weight: 700;        line-height: 500px;        text-align: center;        background: white;        mix-blend-mode: screen;      }    </style>    <div class="box">        <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">            <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />        </video>      <i class="web-font">PEPSI</i>    </div>

复制代码

效果如下：

完美搞定啦！

后记

不得不说，css 还是很强大的，很多意想不到的场景和效果都可以轻轻松松用 css 来实现。就比如今天这个视频蒙版的效果，放在过去，我肯定说前端实现不了，只能让 ui 切图，但是今天我成功装了一把，毕竟看似复杂的效果，谁能想到只用一个属性就能搞定呢？

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/db28b993278fa0d4e40605c8f】。文章转载请联系作者。

南极一块修炼千年的大冰块

关注

还未添加个人签名 2022.07.01 加入

还未添加个人简介

发布

暂无评论

创作场景

纯 css 实现炫酷的视频文本蒙版效果

前言

mix-blend-mode 属性

DOM 结构

@font-face 规则

后记

南极一块修炼千年的大冰块

评论