如何在运行时更改 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。您可以background-image像这样设置body的样式。
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';
只需确保将 URL 替换为实际URL。
如果你已经加载了 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>
只需在 body 上设置一个 onload 函数：
<body onload="init()">
然后在javascript中做这样的事情：
function init() {
var someimage = 'changableBackgroudImage';
document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}
您可以根据某些条件（例如一天中的时间或其他时间）将 'someimage' 变量更改为您想要的任何值，并且该图像将被设置为背景图像。
如果您的页面有一个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和属性选择器来分配 meta它选择的第一个开放图图像。执行类似的任务以获取body. 最后，串内插用于分配body的background.style路径到打开图图像的值。
如果您希望图像覆盖整个视口并保持固定设置，background-size如下所示：
body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';
使用这种方法，您可以使用 CSS 设置低质量的背景图像占位符，然后使用图像onload事件与高保真图像交换，从而减少感知延迟。