javascript 在网站上制作重复文本背景？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5557648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a repeating text background on a website?
提问by ManiacZX
I've been requested to put a sequence of text repeating as the background of a website.
我被要求将一系列重复的文本作为网站的背景。
It will be just a slight shade lighter then the background color, similar to physical company stationary with the name, slogan, whatever repeating covering the paper.
它只会比背景颜色稍微淡一点，类似于实体公司文具，上面有名字、口号，无论纸上有什么重复。
I mocked it up simply enough by putting the following div onto the page
我通过将以下 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>
I like this solution in general terms as using a repeating image seems like a big headache (trying to get a seamless repetition) and the text based seems like better bandwidth wise.
总的来说，我喜欢这个解决方案，因为使用重复图像似乎很头疼（试图获得无缝重复），而基于文本的带宽似乎更好。
However, to get enough text onto the page to cover browser windows maximized at a high resolution, I am manually repeating the text in the html many times over.
但是，为了在页面上获得足够的文本以覆盖以高分辨率最大化的浏览器窗口，我手动多次重复 html 中的文本。
I'm wondering if there is a more elegant solution to this, something CSS based maybe I could say to repeat X times.
我想知道是否有更优雅的解决方案，基于 CSS 的东西也许我可以说重复 X 次。
I know I could repeat the text X times into html server side with PHP, ASP.Net, etc but I am looking for something where the html source output doesn't need that text repeated like that.
我知道我可以使用 PHP、ASP.Net 等将文本重复 X 次到 html 服务器端，但我正在寻找一些东西，其中 html 源输出不需要像那样重复该文本。
I could do it JavaScript based, but then users without JavaScript won't see it. An advantage I could see with the JavaScript would be bots like Google's won't see the repeating text and think it is an attempt to boost keyword hits.
我可以基于 JavaScript 来做，但是没有 JavaScript 的用户将看不到它。我可以通过 JavaScript 看到的一个优势是像 Google 这样的机器人不会看到重复的文本，并认为这是一种提高关键字点击率的尝试。
Comment Responses:
The text is static, essentially it is a company slogan. Picture if instead of SO having a pure white background it was white with a soft gray "Making the Web a Better Place" over and over again.
评论回复：
文字是静态的，本质上是公司的口号。想象一下，如果不是纯白色背景而是白色，而是一遍又一遍地带有柔和的灰色“让网络成为更好的地方”。
The issues with doing this image based I see is lack of text justify and wrap for variance of browser window width.
我看到的基于此图像的问题是缺乏文本对齐和换行以适应浏览器窗口宽度的变化。
It would sometimes need to go:
有时需要这样做：
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
让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好
Then if you reduce the browser width it'd need to be:
然后，如果您减小浏览器宽度，则需要：
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
让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好 让 Web 变得更美好
If you are doing that with a tiled image, you'd end up with:
如果您使用平铺图像执行此操作，您最终会得到：
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
让网络变得更美好 让网络变得更美好 让网络变得更美好 让网络成为更好的地方 让网络变得更美好
采纳答案by ManiacZX
For now I've done it via JavaScript, still open to better solutions.
现在我已经通过 JavaScript 完成了它，仍然对更好的解决方案持开放态度。
I made the div in the html empty
我将 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>
Then created a javascript function that is called from the body's onLoad
然后创建了一个从主体的 onLoad 调用的 javascript 函数
function FillSlogan()
{
var text = '';
for(var i=0; i<50; i++)
{
text += 'Making the Web a Better Place ';
}
$('#Slogan').html(text);
}
The FillSlogan function is in an include file and will be denied in robots.txt for good measure.
FillSlogan 函数位于一个包含文件中，并且会在 robots.txt 中被拒绝以进行很好的衡量。
This way it is able to use the justification and wrapping abilities, but keeps the repeated text away from the bots.
这样它就可以使用对齐和换行功能，但使重复的文本远离机器人。
回答by Mikel Annjuk
You can play with canvas+javascript. The simplest way to create canvas and use it as background:
你可以玩画布+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")+ ")" });
回答by no.good.at.coding
If you don't want to use JavaScript, you could make a dynamic image generator as a server-side component (servlets, PHP whatever) and use it as the image source with the text to be generated specified in the URL. So something like this in your CSS (which could itself be generated by a script which would allow you to specify different text strings for the image generator):
如果您不想使用 JavaScript，您可以将动态图像生成器作为服务器端组件（servlet、PHP 等）并将其用作图像源，并在 URL 中指定要生成的文本。所以在你的 CSS 中是这样的（它本身可以由一个脚本生成，它允许你为图像生成器指定不同的文本字符串）：
body{
background-image: url('http://example.com/myimageservlet?msg=I+want+this+text+as+my+repeating+background');
background-repeat: repeat;
}
