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

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

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

有时需要去:

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

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

相关文章:

javascript - 使用javascript使用phonegap调用电话短信api

javascript - 在 ASP.NET MVC 中使用 Bootstrap 创建模式

javascript - 当我在表单元素上执行重置方法时,为什么我的隐藏字段没有被重置?

Jquery DatePicker 条件样式

python - 在 Django 网站中添加背景图片

javascript - 关于select all H3 inside DIV的问题

javascript - 限制elasticsearch返回数据的字段长度

html - 居中 将按钮并排对齐到页面的中心

JavaScript 函数排序

css - 如何将嵌套的 css 类设置为 CssResources