更改正文中的背景图像答案

【问题标题】：change background image in body更改正文中的背景图像
【发布时间】：2017-10-04 18:58:21
【问题描述】：

如何在运行时更改 CSS 中的背景图像？我在正文中有以下背景图像，可以在运行时更改图像吗？

body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; 
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:normal; 
color:#404040;
line-height:20px; }

【问题讨论】：

标签： javascript css

【解决方案1】：

您需要为此使用 Javascript。你可以像这样为body设置background-image的样式。

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';

只需确保将 URL 替换为实际 URL。

【讨论】：

嗨谢谢，但我没有从下面的代码中得到任何更改。
你需要把它放在body标签的末尾，或者在文档加载时调用它。
感谢您的解决方案。只有一个问题；为什么不使用document.body 而不是document.getElementsByTagName('body')[0]？
IIRC document.body 是 DOM 级别 0 并且在历史上得到广泛支持。 According to devdocs.io 不是首选，因为如果文档 MIME 类型未设置为 text/html 或 application/xhtml+xml，Firefox 可能无法正确处理它。

【解决方案2】：

如果你已经加载了 JQuery，你可以这样做：

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

编辑：

首先在head标签中加载JQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

然后在页面发生某些事情时调用 Javascript 来更改背景图像，例如完成加载时：

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>

【讨论】：

我尝试在 html 中应用您的代码，但没有任何更改。
只是要指出，原始问题要求严格的 javascript 答案，这利用了 jquery。下面的答案是根据实际问题执行此操作的正确方法。不知道为什么这被选为最佳答案。
答案以“如果你已经加载了 JQuery...”开头，很多网站已经这样做了。
对于纯 JavaScript 代码，您必须使用 background 语法，而不是 backgroungImage。等式element.style.background = "url('/img/loading/loading.gif') no-repeat center center"

【解决方案3】：

只需在body上设置一个onload函数：

<body onload="init()">

然后在javascript中做这样的事情：

function init() {
  var someimage = 'changableBackgroudImage';
  document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}

您可以根据某些条件（例如一天中的时间等）将“someimage”变量更改为您想要的任何内容，并且该图像将被设置为背景图像。

【讨论】：

【解决方案4】：

如果您的页面有一个Open Graph 图片，通常用于社交分享，您可以使用它在运行时使用 vanilla JavaScript 设置背景图片，如下所示：

<script>
  const meta = document.querySelector('[property="og:image"]');
  const body = document.querySelector("body");
  body.style.background = `url(${meta.content})`;
</script>

上面使用document.querySelector 和Attribute Selectors 来分配 meta 它选择的第一个Open Graph 图像。执行类似的任务来获取body。最后，字符串插值用于为body和background.style分配Open Graph图像的路径值。

如果您希望图像覆盖整个视口并保持固定设置background-size，如下所示：

body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';

使用这种方法，您可以使用 CSS 设置低质量背景图像占位符，然后使用图像onload 事件与高保真图像交换，从而减少感知延迟。

【讨论】：