一行代码，实现神奇的文字图片
文字难以表达真正的效果，先直接上图看看最终呈现的效果：
这张由文字组合而成的神奇图片，它的原图是这样：
图片变形成文字，
这样的效果是如何实现的呢？
其实很简单，由html、css、js三部分组成，一看便会。
直接上代码：
1、Html部分：
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="style.css">
<script src="change.js"></script>
</head>
<body>
<input type="button" value="变成文字" οnclick="change()">
<p id="text">In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.In front of the bed there was moonlight, and I thought it
was frost on the ground.Looking up the bright moon, lower the head to
think of home.</p>
</body>
</html>
在Html中主要创建了用于显示图片的文字区域，大块的字符是用于稍后变形为图片使用。
2、CSS部分：
p {
background: url("pic.avif");
width: 800px;
margin: auto;
background-position: center;
font-family: 'Poppins', sans-serif;
background-size: 70vh;
line-height: 14px;
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
body {
background: black;
overflow: hidden;
}
在CSS中定义了网页背景颜色，以及图片来源、位置等。如果要修改显示的图片，可以在这里修改：
3、JS代码部分：
这是最重要的部分，但也是最简单的部分，仅仅一行代码，就可实现图片变成文字显示：
function change(){
document.getElementById("text").style["-webkit-background-clip"] = "text";
}
可以看出，其实原理是使用了一个神奇的css属性：-webkit-background-clip。
如果不想让这个小秘密被人发现，可以对上面这段JS代码用JShaman加密处理：
加密后的代码成为：
这个神奇的小功能，快收藏起来吧。
一行代码，实现神奇的文字图片相关推荐
- 一行代码解决 ThinkPHP5 压缩水印图片后透明背景变成白色背景的问题
需求:在用户上传图片时添加图片水印,水印图大小需要根据用户上传的图片大小变化: 思路:上传图片时,使用TP5封装好的图片处理类对上传的图片进行添加水印,水印图需要根据上传图片的大小进行适当压缩: 问题 ...
- 【转载】一行代码加载网络图片到ImageView——Android Picasso
原文链接:一句代码加载网络图片到ImageView--Android Picasso 注意:此处使用下面代码需要先配置一下gradle,下载所需包. 具体操作如下图: compile 'com.sq ...
- Python3一行代码实现图片文字识别
今天突发奇想,想用Python识别图片里的文字.没想到Python实现图片文字识别这么简单,只需要一行代码就能搞定 from PIL import Image import pytesseract # ...
- Python人工智能之图片识别，一行代码实现图片文字识别
我们以识别诗词为例 下面是我们要识别的图片 先看下效果图 我们运行代码后识别的结果,有几个字没有正确识别,但是大多数字都能识别出来. 一行代码就能识别图片,我们背后要做些准备工作的 •这里我们需要用到 ...
- python识别图片上的文字_python如何一行代码实现图片文字识别
编写代码如下: from PIL import Imageimport pytesseract text = pytesseract.image_to_string(Image.open('C:\\U ...
- 一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
- 翻译app上的图片文字信息提取好神奇？如何实现一个文字图片识别程序
web文字图片识别程序开发 摘要 一.tesseract-ocr介绍 二.安装tesseract 三.使用命令行 四.程序实现(Python) 五.程序实现(Java) 六.实验测试 七.总结 摘要 ...
- python文字提取关键信息_Python提取图片中的文字信息，腾讯内部技术，一行代码搞定！...
用过手机QQ就知道,点击一个图片会弹出一个小功能,那就是提取图片中的文字.非常方便实用,那么很难实现吗? 利用Python提取图片中的文字信息,只需要一行代码就能搞定! 当然,这是吹牛皮的,但是真正的 ...
- Python技巧-只用一行代码轻松实现图片文本识别
生活中我们可能会遇到需要从图片上获取文本内容的情况,人工去核对的话非常头疼.今天小千就来教大家使用Python一行代码就能实现文本识别,下面来看看吧. Python图片文本识别 这里我们需要用到两个库 ...
最新文章
- Android学习----自适应国际化语言
- @include与jsp:include的区别
- tar xvf实现的是什么功能呢？
- ept技术_EPT技术在压载水处理中的运用
- ajax序列化表单，再也不用通过data去一个个的传值了
- 【CZY选讲·Yjq的棺材】
- leetcode/力扣 贪心算法总结，代码随想录PDF下载
- windows单实例的办法
- 器件选型-电源管理芯片目录大全
- pandas+groupby对南京二手房进行数据可视化及大图显示
- Windows XP SP3截至2011年4月更新补丁汇总(WinXP补丁包) 修正版
- Centos7 进入单用户模式，修复系统
- Python实现支持向量机（基于双月数据集）
- 【Jenkins】Jenkins容器构建脚本以及容器瘦身docker-slim使用
- Saas的概念及相关应用
- 4g卡放5s显示无服务器,老年机装4g卡没信号
- 亚马逊首席技术官：2023年及未来五大技术趋势预测 | 美通社头条
- vue2.0实战项目——简单的快餐店系统
- Webkit之webkit
- 免费收银系统能否占领市场？