字节菇凉
<style type="text/css">#textBox {
margin: 20px auto 0;
width: 500px;
height: 750px;
color: transparent;
font-size: 8px;
letter-spacing: -2px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
background: #333 url('/data/attachment/forum/202203/12/090353xcqk7q7dbyd47mqd.jpg') no-repeat center/cover;
background-clip: text;
-webkit-background-clip: text;
}
</style>
<div id="textBox"></div>
<script language="javascript">
var letter = "abcdefghijklmnopqrstuvwxyz";
var ttStr = "";
for(j=0; j<171; j++){
ttStr += (j%2 == 0 ? letter.toUpperCase() : letter);
}
document.getElementById("textBox").innerHTML = ttStr + " 2022-3-12";
</script>
实现原理分享：
给 div 盒子加载一整图片作为背景图片，图片最好层次分明、轮廓清晰。组织足够多的文本，字体大小合适，字与字之间的距离缩小（letter-spacing: -2px）一点，前景色（即文本颜色）设置为透明（color: transparent），然后用 background-clip 属性设置为 text，这就令背景图片的显示只为文本。
本灌水帖，我加上JS代码，用它来组织文本：先创建一个小写字母表字符串，然后用一个for语句组装一个新的字符串，循环中每一轮设置字母为大写，最后输出到 div 盒子。
里面的知识点：
一、文本的折行。字母连起来写时，中间没有空格，会只出现一行长长的，所以要强制折行，CSS中用三行代码：
white-space: normal;
word-wrap: break-word;
word-break: break-all;
二、字间距：letter-spacing: 2px;
三、以文本呈现盒子底图：
background-clip: text;
-webkit-background-clip: text; //适配Chrome类浏览器
四、JS取余数：%
JS中，取余数运算符是 %，例如，要取任意一个数除以 2 的余数，表达为 k%2。
本帖中要做的是，for循环语句里，步进变量 j 若被 2 整除，就将所给字串变为大写，否则保留原来的小写样式：
ttStr += (j%2 == 0 ? letter.toUpperCase() : letter);
ttStr 是要组织的字串以便最后输出到 div 盒子里，它的值在原有基础上不断增加，增加的依据是通过一个三元运算来完成：如果 j 被 2 整除（j%2 == 0），则（?）字母变为大写（toUpperCase），否则（:）保留原样（letter）。
关于三元运算，运算符为：条件表达式 ? 结果1 : 结果2。它等价于 if ... else ... 条件语句：
if(条件表达式) {
结果1 //条件符合的话
} else {
结果2 //否则，条件不符合的话
}
代码分享：
<style type="text/css">
#textBox {
margin: 20px auto 0;
width: 500px;
height: 750px;
color: transparent;
font-size: 8px;
letter-spacing: -2px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
background: #333 url('/data/attachment/forum/202203/12/090353xcqk7q7dbyd47mqd.jpg') no-repeat center/cover;
background-clip: text;
-webkit-background-clip: text;
}
</style>
<div id="textBox"></div>
<script language="javascript">
var letter = "abcdefghijklmnopqrstuvwxyz";
var ttStr = "";
for(j=0; j<171; j++){
ttStr += (j%2 == 0 ? letter.toUpperCase() : letter);
}
document.getElementById("textBox").innerHTML = ttStr + " 2022-3-12";
</script>
<style type="text/css">
#dlBox {
margin: 20px auto 0;
width: 240px;
height: 240px;
color: transparent;
font-size: 10px;
letter-spacing: -1px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
background: #333 url('https://pic.imgdb.cn/item/61bf23982ab3f51d91a0b99d.gif') no-repeat center/cover;
background-clip: text;
-webkit-background-clip: text;
}
</style>
<div id="dlBox"></div>
<script language="javascript">
var txtStr = "采菊东篱下，悠然见南山。山气日夕佳，飞鸟相与还。此中有真意，欲辨已忘言。";
var idx=4;
while(idx > 0){
txtStr += txtStr;
idx --;
console.log(" ", idx);
}
document.getElementById("dlBox").innerHTML = txtStr + " 2022-3-12";
</script>
东篱在地板。东篱这张图片好像不肿么适合做字节菇凉{:4_170:}，但还是可以依稀看得出来，说明东篱年轻的时候也是美人胚子，没做开发而已。
代码：
<style type="text/css">
#dlBox {
margin: 20px auto 0;
width: 240px;
height: 240px;
color: transparent;
font-size: 10px;
letter-spacing: -1px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
background: #333 url('https://pic.imgdb.cn/item/61bf23982ab3f51d91a0b99d.gif') no-repeat center/cover;
background-clip: text;
-webkit-background-clip: text;
}
</style>
<div id="dlBox"></div>
<script language="javascript">
var txtStr = "采菊东篱下，悠然见南山。山气日夕佳，飞鸟相与还。此中有真意，欲辨已忘言。";
var idx=4;
while(idx > 0){
txtStr += txtStr;
idx --;
}
document.getElementById("dlBox").innerHTML = txtStr + " 2022-3-12";
</script>
这个又是CSS制作的，厉害啊。{:4_199:} 加林森 发表于 2022-3-12 09:59
这个又是CSS制作的，厉害啊。
严格来讲是CSS+JS，主要功能由CSS实现 马黑黑 发表于 2022-3-12 10:01
严格来讲是CSS+JS，主要功能由CSS实现
嗯嗯，够我学习一阵了。 加林森 发表于 2022-3-12 10:04
嗯嗯，够我学习一阵了。
代码不算复杂，虽然CSS部分多了一些 马黑黑 发表于 2022-3-12 10:06
代码不算复杂，虽然CSS部分多了一些
主要是学习JS，这个没有搞对就玩完了。 加林森 发表于 2022-3-12 10:11
主要是学习JS，这个没有搞对就玩完了。
嗯。两个例子，一楼用了for循环语句，地板用了while循环语句。这两个循环语句是JS基础中的基础，经常会用到。 这也太神奇了，图片变成了由字母组成的图案，真想不到{:4_187:} 本帖最后由 马黑黑 于 2022-3-12 10:30 编辑
while循环语句的解释：
var txtStr = "采菊东篱下，悠然见南山。山气日夕佳，飞鸟相与还。此中有真意，欲辨已忘言。";
var idx=4;
while(idx > 0){
txtStr += txtStr;
idx --;
}
document.getElementById("dlBox").innerHTML = txtStr + " 2022-3-12";
先声明一个字串 var txtStr = "...";
接着声明一个步进变量 idx = 4;
下面是重点，while循环语句：
while(idx > 0){
txtStr += txtStr;
idx --;
}
当 idx > 0，就做 txtStr += txtStr，意思是自己加到自己身上来。第一回加，假设原字串是 abc，则现在是 abcabc，第二回加，是abcabcabcabc，因为变量 txtStr 第一回自加时已经变成了 abcabc，换言之，本例的字串自加法是每一回都是成倍增长的，这样效率更高，所用的循环次数会更少。
当 idx > 0 时，还做一件事：idx --，意思是说，每一次循环，步进变量 idx 都要自己减去 1，唯有如此 while 循环才不会无限循环。循环语句无限循环的后果是什么？电脑会宕机，因为循环中不断地成倍成倍地自加字符串，这些字符串会临时占用内存，当内存用完，电脑就不能正常工作了。
循环工作结束后，通过id标识号找到 div 盒子，并将 txtStr 的新值在它上面显示出来。
红影 发表于 2022-3-12 10:26
这也太神奇了，图片变成了由字母组成的图案，真想不到
这个之前其实有演示过，只不过多数用的不是图片，是线性渐变。
有空看看13楼 从动图中能看出，遇到不同底色的时候，文字会自动变色呢。
我当兵的时候，我读大学的同学寄来一张打印件，那是他的毕业论文附件，使用字节打出来的山口百惠的正点图。收到邮件时，我惊呆了，从此开始利用业余时间研究电脑这个神奇的工具。那时，计算机可是异常珍贵的东东，部队里要能用上它，具备的计算机操作能力必须是极客级别的官兵，我通过努力不久就获取了上机的机会，还差一点参与某个特别行动。当时的电脑，CPU都是386的。
红影 发表于 2022-3-12 10:35
从动图中能看出，遇到不同底色的时候，文字会自动变色呢。
原理就是酱紫的：背景只针对文本，亦即有文本它才显示，背景只显示在文本上。 for(j=0; j<171; j++)这里的171是怎么确定的？ 马黑黑 发表于 2022-3-12 10:15
嗯。两个例子，一楼用了for循环语句，地板用了while循环语句。这两个循环语句是JS基础中的基础，经常会用 ...
是的，我慢慢来学习。谢谢老黑，你辛苦了。{:4_190:} 加林森 发表于 2022-3-12 10:45
是的，我慢慢来学习。谢谢老黑，你辛苦了。
可能你学习的更辛苦呢