javascript - 在网站上制作重复的文本背景?

标签 javascript html css

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

它将比背景颜色稍微浅一点,类似于带有名称、口号的实体公司文具,无论在纸张上重复出现什么内容。

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

评论回复:
文字是静态的,本质上是一个公司的口号。想象一下,如果 SO 不是纯白色背景,而是白色和柔和的灰色“让 Web 成为一个更好的地方”,一遍又一遍。

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

它有时需要去:

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



然后,如果您减小浏览器宽度,则需要:

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



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

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

最佳答案

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

var text = '让网络成为一个更好的地方 让网络变得更好';
var canvas = document.createElement("canvas");
变体字体大小 = 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")+ ")"});

关于javascript - 在网站上制作重复的文本背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5557648/

相关文章:

html - cakephp 使 div 成为链接

javascript - jquery-ui-取消拖动转义键

javascript - Angularjs:通过 $http 调用来改变 $resource

javascript - 如何让我的脚本在 wordpress 中工作

php - 将 PHP 转换为 JavaScript。将键/值存储到数组中

html - div内垂直居中图像不起作用

javascript - 如何创建可以包含在其他 HTML 页面中的 HTML 文件?

javascript - 客户端(javascript)文件上传加密

html - 选择偶数/奇数类元素

html - Safari溢出/可见性和溢出/显示错误(元素仍然可见)