字节菇凉

马黑黑

马黑黑

实现原理分享：

给 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 --;
}
document.getElementById("dlBox").innerHTML = txtStr + " 2022-3-12";
</script>

加林森

这个又是CSS制作的，厉害啊。

马黑黑

加林森 发表于 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基础中的基础，经常会用到。

红影

这也太神奇了，图片变成了由字母组成的图案，真想不到

马黑黑

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基础中的基础，经常会用 ...

是的，我慢慢来学习。谢谢老黑，你辛苦了。

马黑黑

加林森 发表于 2022-3-12 10:45
是的，我慢慢来学习。谢谢老黑，你辛苦了。

可能你学习的更辛苦呢