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

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 这样的机器人不会看到重复的文本，并认为这是一种提高关键字点击率的尝试。

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

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

有时需要这样做：

让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好

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

让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好

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

让网络变得更美好 使网络成为更好的地方 使网络成为更好的地方 使网络成为更好的地方

Answer 1

你可以玩画布+javascript。创建画布并将其用作背景的最简单方法：

    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 sans-serif';
    context.fillText(text, 0, fontSize);

    $('#elementId').css({'background-image':"url(" + canvas.toDataURL("image/png")+ ")" });

Answer 2

目前我已经通过 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>

然后创建一个从 body 的 onLoad 调用的 javascript 函数

function FillSlogan()
{
    var text = '';

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

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

FillSlogan 函数位于包含文件中，并且在 robots.txt 中将被拒绝以进行良好的测量。

这样，它就可以使用对齐和换行功能，但可以让机器人远离重复的文本。