在网站上重复文字背景？

我被要求将一系列文字重复作为网站的背景。在网站上重复文字背景？

这将只是一个轻微的树荫打火机那么背景颜色，类似于物理公司固定的名称，口号，无论重复覆盖的文件。

我嘲笑它足够简单通过将以下的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次。

我知道我可以重复文本X次与PHP，ASP.Net等HTML服务器端，但我寻找的东西在HTML源输出不需要的文本重复这样。

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

评论回应：
的文字是静态的，它本质上是一个公司的口号。照片如果不是纯粹的白色背景，而是带有柔和的灰色“一次又一次地让网站变得更美好”的白色。

用做基于我看到这个图片的问题是缺乏文字证明，敷了浏览器窗口宽度的变化。

它有时会需要去：

使Web一个更好的地方让网络变得更美好使得网站一个更好的地方让网络更好地使Web一个 Better Place公司

然后，如果你减少浏览器的宽度它会需要是：

让网络变得更美好制作日e网更美好使Web一个更好的地方让网络变得更美好制作

如果你正在做的是用瓷砖的形象，你会结束：

使网络一个更好的地方让网络使Web一个更好的地方让网络使Web一个更好的地方让网络

来源

2011-04-05 ManiacZX

CSS中没有任何东西可以让您重复一段文字。你必须产生足够的文本来覆盖最坏的'页面大小'覆盖率，是的，你可能会被搜索引擎击倒以填充“关键字” – 2011-04-05 19:53:25

需要重复的文本是静态的还是应该的不时更换？ – Chandu 2011-04-05 19:54:01

我不认为图像重复是一个不好的解决方案 - 你只需要下载一个文本的小图像1次，然后使用CSS重复背景图像标签来实现效果。 http://htmldog.com/reference/cssproperties/background-repeat/ – idbentley 2011-04-05 20:31:22

现在我已经通过JavaScript做到了，还开着更好的解决方案。

我做了DIV在HTML空

<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中是很好的措施。

这样就可以使用对齐和包装功能，但是可以保留重复的文本远离僵尸程序。

来源

2011-04-05 22:14:02 ManiacZX

你是否会分享到这个网站的链接，你已经使用过吗？ – liz 2012-02-15 21:38:25

@liz该网站是HTTP：//www.sourcewholesaleprinting .com – ManiacZX 2012-02-17 20:08:51

^网站已被更新，不再显示该帖子中提到的代码。 – Sgnl 2016-10-23 21:57:21

如果你不想使用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; 
}

来源

2011-04-05 20:50:43

如上所述，图像的生成是不需要的，因为文本是静态的，我在处理图像的方式上消隐，以便以可变的宽度对文本进行适当的包装，它需要切断右侧的图像边界和继续在下一行开始的中断点，我认为这是一个可行的答案的图像。 – ManiacZX 2011-04-05 21:13:39

您可以使用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")+ ")" });

来源

2016-03-24 21:34:56

在网站上重复文字背景？

回答

相关问题