javascript - 在网站上制作重复的文本背景？

Question

有人要求我将一系列重复的文本作为网站的背景。

它只会比背景颜色浅一点，类似于实体公司的文具，上面有名称、口号，无论在纸上重复什么。

我通过将以下 div 放到页面上来简单地模拟它

<div style="z-index: -1; position: fixed; font-size: 20pt; color: rgb(148, 148, 148); 
text-align: justify;">Repeating Text Here Repeating Text Here Repeating Text Here</div>

总的来说，我喜欢这个解决方案，因为使用重复图像似乎很让人头疼(试图获得无缝重复)，而基于文本的方式似乎更适合带宽。

但是，为了在页面上获得足够的文本以覆盖以高分辨率最大化的浏览器窗口，我手动多次重复 html 中的文本。

我想知道是否有更优雅的解决方案，基于 CSS 的东西也许我可以说重复 X 次。

我知道我可以使用 PHP、ASP.Net 等将文本重复 X 次到 html 服务器端，但我正在寻找 html 源输出不需要像那样重复文本的东西。

我可以基于 JavaScript 来实现，但是没有 JavaScript 的用户将看不到它。我可以看到 JavaScript 的一个优势是像 Google 的机器人不会看到重复的文本，并认为这是提高关键字点击率的尝试。

评论回复:
文本是静态的，本质上是公司的口号。想象一下，如果不是 SO 具有纯白色背景，而是白色和柔和的灰色，一遍又一遍地写着“让网络变得更美好”。

我看到基于图像的问题是缺少文本对齐和换行以适应浏览器窗口宽度的变化。

有时需要去:

Making the Web a Better Place Making the Web a Better Place Making the Web a Better Place Making the Web a Better Place Making the Web a Better Place

然后，如果您减小浏览器宽度，则需要:

Making the Web a Better Place Making the Web a Better Place Making the Web a Better Place Making the Web a Better Place Making

如果您使用平铺图像执行此操作，您最终会得到:

Making the Web a Better Place Making the Web Making the Web a Better Place Making the Web Making the Web a Better Place Making the Web

Answer 1

可以玩canvas+javascript。创建 Canvas 并将其用作背景的最简单方法:

    var text = 'Making the Web a Better Place Making the Web';    var canvas = document.createElement("canvas");    var fontSize = 24;    canvas.setAttribute('height', fontSize);    var context = canvas.getContext('2d');    context.fillStyle    = 'rgba(0,0,0,0.1)';    context.font         = fontSize + 'px sans-serif';    context.fillText(text, 0, fontSize);    $('#elementId').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });