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而是白色，带有柔和的灰色“让网络变得更好”，一遍又一遍。

我看到基于这个图像的问题是缺少文本证明和浏览器窗口宽度方差的包装。

有时需要去：

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

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

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

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

让网络成为一个更好的网站使Web成为一个更好的网站让网络成为一个更好的网站

Answer 1

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


    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")+ ")" });

Answer 2

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

body{
     background-image: url('http://example.com/myimageservlet?msg=I+want+this+text+as+my+repeating+background');
     background-repeat: repeat;
}

Answer 3

现在我已经通过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>

然后创建了一个从正文的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中将被拒绝以便进行测量。

通过这种方式，它可以使用对齐和包装功能，但可以使重复的文本远离机器人。

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

3 个答案: