文字一行行出现的图片怎么弄（代码中文字和图片在一行）
文字一行行出现的图片怎么弄，原文标题：一行代码，实现神奇的文字图片。文字难以表达真正的效果，先直接上图看看最终呈现的效果
文字一行行出现的图片怎么弄，原文标题：一行代码，实现神奇的文字图片。
文字难以表达真正的效果，先直接上图看看最终呈现的效果：
这张由文字组合而成的神奇图片，它的原图是这样：
图片变形成文字，
这样的效果是如何实现的呢？
其实很简单，由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="变成文字" onclick="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加密处理：
加密后的代码成为：
这个神奇的小功能，快收藏起来吧。
本文《文字一行行出现的图片怎么弄（代码中文字和图片在一行）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。随机文章
站长导航友情链接交换
搜素引擎算法
关键词排名优化
GEO培训
SEO教程
站长导航
友情链接交换
百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：修丹道的程序猿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/818496.html
微信扫一扫
支付宝扫一扫
