canvas 添加竖版文字_CSS题目系列（4）

描述

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

效果就是这样的：

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

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

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

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

正文

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

-webkit-text-fill-color: transparent
-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年就给出了答案。

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

canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层相关推荐

图片在canvas中显示，给canvas添加文字，文字描边，将canvas保存成图片下载到本地
Canvas简介 HTML5新增标签 Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitma ...
小程序实现canvas添加图文
小程序实现canvas添加图文笔者今年刚毕业,也没从业经历,难免有代码编写不成熟的地方,欢迎指正上周开始接触小程序,这里实现的功能类似表情包制作:选择图片.输入文字后保存到本地.目前只是demo ...
android水印控件,Android图片添加文字水印并保存水印文字图片到指定文件
Android图片添加文字水印并保存水印文字图片到指定文件package zhangphil.test;import android.graphics.Bitmap;import android.gr ...
css字体阴影_css3如何添加文字阴影效果？text-shadow设置文字阴影效果
阴影效果是一个常见也很实用的效果,相信有些朋友在使用阴影效果来美观网页页面时,有时会有一些疑问,比如:字体文字阴影是怎样设置的等等.那么本章就给大家谈谈css3是如何设置字体文字阴影的.有一定的参考价 ...
字体系列之文字样式(CSS、HTML)
字体系列之文字样式(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta char ...
HTML5游戏引擎（二）02-egret引擎之hello world——快速上手-清理项目程序入口绘制单色背景调整屏幕的适配模式添加文字响应用户操作-让文字变色
HTML5游戏引擎(二)02-egret引擎之hello world--快速上手-清理项目 & 程序入口 & 绘制单色背景 & 调整屏幕的适配模式 & 添加文字 &am ...
Canvas入门教学（3）图片与文字的绘制
上节课跟大家讲解了基本的线条和多边形的绘制,主要的方法是stroke()和fill()方法.并且还封装了两个动态绘制线条和多边形的方法.这节课我们带领大家来认识一下文字以及图片的绘制,从而理解一下ca ...
MATLAB二维绘图(二)向图中添加标题，坐标轴，图标和文字信息
MATLAB二维绘图(二)向图中添加标题,坐标轴,图标和文字信息 1.添加标题.图例.x轴信息和y轴信息,示例: %% 添加标题 clear; clc; close all; x = 0:0.1:2* ...
moviepy第2天|对视频添加圆圈渐变大小的结尾及文字
MoviePy(完整文档)是一个用于视频编辑的Python库:剪切,串联,标题插入,视频合成(又名非线性编辑),视频处理和创建自定义效果.有关一些使用示例,请参阅库. MoviePy可以读取和写入所有 ...

canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层

描述

正文

后记

canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层相关推荐

最新文章

热门文章

canvas 添加 竖版文字_CSS题目系列（4） - 文字穿透遮罩层

描述

正文

后记

canvas 添加 竖版文字_CSS题目系列（4） - 文字穿透遮罩层相关推荐

最新文章

热门文章

canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层

canvas 添加竖版文字_CSS题目系列（4） - 文字穿透遮罩层相关推荐