如何使用 jQuery 向此页面添加背景图像？

Posted 2023-03-08

【中文标题】如何使用 jQuery 向此页面添加背景图像？

【英文标题】：How can I add a background image to this page using jQuery?

【发布时间】：2016-07-21 13:08:22

【问题描述】：

我在 GitHub 上发现了一个很棒的开源 Node.JS 登录系统。它位于here。我在我的网站 (cend.io) 上进行了设置。一切都很酷。

现在，我想做的是向主页添加一个拉伸的响应式背景图像。类似this。

考虑到 Node.JS 登录系统的复杂性，最有效的方法是什么？

提前感谢您的耐心等待。

【问题讨论】：

无需使用 jQuery，只需像在其他任何地方一样使用 CSS。当前背景渐变正在应用于style.css 文件中的body 标记。

不错。想知道是否可以这样做。 style.styl 文件的意义是什么？它看起来像一个没有那么多语法的 CSS 文件。这也需要调整吗？

你应该只在 styl 文件中进行更改，它是经过预处理的 CSS 文件，所以每次编译时，style.css 文件将被 stylus 文件中的任何内容覆盖

非常好 - 非常感谢您的帮助。我要试试这个。

【参考方案1】：

你不需要 jQuery，设置背景图片可以像这样用纯 javascript 完成：

document.body.style.backgroundImage = "url('image.png')";

【讨论】：

酷，这看起来很简单。我的部分困惑源于没有“index.html”文件可以使用。它是服务器文件夹中的所有 .jade 文件。这个解决方案是否仍然有效/代码会改变吗？

既然可以使用纯 CSS，为什么还要使用 JavaScript？

@Apad1 他问如何使用 jQuery 来做，所以我用 JavaScript 给出了答案；但是你的权利你可以用 CSS 来做，你可以使用 jQuery 来设置 CSS...

是的，对不起，我的问题是针对 OP 而不是你，这绝对是用 JavaScript 完成的。

@cbclark - 请参阅下面的答案。绝对是做到这一点的最佳方法。不要使用 JavaScript 进行样式设置。这就是 CSS 的用途。

【参考方案2】：

你只需要将它添加到 CSS 中：

html  
  background: url(images/bg.jpg) no-repeat center center fixed; // change to your own image
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

这将为html 元素添加整页背景图片。

【讨论】：

这对我有用。我不得不将代码粘贴在 body 标记中，而不是 html。

@cbclark - 是的，body 也可以。你能接受我的回答吗？