Javascript 在网站上制作重复文本背景？

我被要求把一系列重复的文本作为网站的背景

它只是比背景颜色稍微浅一点，类似于公司的实物文具，上面写着名字、口号，或者其他重复的东西

通过在页面上添加以下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的一个优势是，像谷歌这样的机器人不会看到重复的文本，并且认为这是一种提高关键字点击率的尝试

评论回复：
文本是静态的，本质上是一个公司口号。如果不是纯白的背景，而是白色，再加上柔和的灰色，“让网络变得更美好”一遍又一遍

我看到，基于图像进行此操作的问题是缺少针对浏览器窗口宽度变化的文本对齐和换行

有时需要：

使网络成为更好的地方使网络成为更好的地方 网络是一个更好的地方使网络成为一个更好的地方使网络成为一个更好的地方 更好的地方

然后，如果减少浏览器宽度，则需要：

让网络成为更好的地方让网络成为更好的地方 使网络成为更好的地方使网络成为更好的地方

如果您使用平铺图像进行此操作，您将得到：

让网络成为一个更好的地方 让网络成为一个更好的地方 让网络成为一个更好的地方

---

如果您不想使用JavaScript，可以制作一个动态图像生成器作为服务器端组件（servlets、PHP等），并将其用作图像源，在URL中指定要生成的文本。在CSS中类似这样的东西（它本身可以由一个脚本生成，该脚本允许您为图像生成器指定不同的文本字符串）：

---

现在，我已经通过JavaScript完成了这项工作，仍然可以找到更好的解决方案

我使html中的div为空

<div id="Slogan" style="z-index: -1; position: fixed; font-size: 20pt; color: #999999; text-align: justify; margin-left: 6px; margin-right: 6px;"></div>

然后创建一个javascript函数，该函数从主体的onLoad调用

function FillSlogan()
{
    var text = '';

    for(var i=0; i<50; i++)
    {
        text += 'Making the Web a Better Place ';
    }

    $('#Slogan').html(text);
}

函数
{
var text=''；
对于（var i=0；i您可以使用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")+ ")" });
var text=‘让网络成为更好的地方，让网络更美好’；
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无衬线”；
context.fillText（文本，0，字体大小）；
$（'#elementId'）.css（{'background-image'：“url（“+canvas.toDataURL”（“image/png”）+”））”）；
CSS中没有任何东西可以让你重复一大块文本。你必须生成足够的文本来覆盖最坏情况下的“页面大小”覆盖范围，是的，你可能会因为插入“关键字”而被搜索引擎批评需要重复的文本是静态的还是应该不时更改？我不认为图像重复是一个糟糕的解决方案-您只需下载文本的一个小图像1次，然后使用css重复背景图像标记即可达到效果。@Marc B，我不认为有css属性，基本上，只需说出打球的想法。这是可行的，使用一些切肉机标语内联块宽度计算，并逐行绘制，根据上一行的剪切量计算下一行第一个标语的偏移量+上一行的字母/单词间距，使其完全填满整行。尽管就概念而言，如果我如果要实现它，我需要为此付出大量的工作，如果它看起来像完美的排版。如上所述，图像生成是不需要的，因为文本是静态的，我正在寻找一种方法来处理图像，以使文本以不同的宽度进行适当的包装。它需要在正确的边界处切断图像，然后继续下一行的图像，从截止点开始，我认为这不是一个可行的答案。如果您使用过此网站，您是否会共享该网站的链接？^网站已更新，不再显示帖子中提到的代码。
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")+ ")" });