Javascript 更改正文中的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10867503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change background image in body
提问by VeecoTech
How do i change the background image in CSS at run time? I have the following background image in body and can the image be changed at run time?
如何在运行时更改 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; }
采纳答案by nathancahill
If you have JQuery loaded already, you can just do this:
如果你已经加载了 JQuery，你可以这样做：
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
EDIT:
编辑：
First load JQuery in the head tag:
首先在head标签中加载JQuery：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Then call the Javascript to change the background image when something happens on the page, like when it finishes loading:
然后在页面上发生某些事情时调用 Javascript 来更改背景图像，比如当它完成加载时：
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
回答by
You would need to use Javascript for this. You can set the style of the background-imagefor the body like so.
为此，您需要使用 Javascript。您可以background-image像这样设置body的样式。
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';
Just make sure you replace the URL with the actualURL.
只需确保将 URL 替换为实际URL。
回答by jimjimmy1995
Just set an onload function on the body:
只需在 body 上设置一个 onload 函数：
<body onload="init()">
Then do something like this in javascript:
然后在javascript中做这样的事情：
function init() {
var someimage = 'changableBackgroudImage';
document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}
You can change the 'someimage' variable to whatever you want depending on some conditions, such as the time of day or something, and that image will be set as the background image.
您可以根据某些条件（例如一天中的时间或其他时间）将 'someimage' 变量更改为您想要的任何值，并且该图像将被设置为背景图像。
回答by Josh Habdas
If you're page has an Open Graphimage, commonly used for social sharing, you can use it to set the background image at runtime with vanilla JavaScript like so:
如果您的页面有一个Open Graph图片，通常用于社交分享，您可以使用它在运行时使用 vanilla JavaScript 设置背景图片，如下所示：
<script>
const meta = document.querySelector('[property="og:image"]');
const body = document.querySelector("body");
body.style.background = `url(${meta.content})`;
</script>
The above uses document.querySelectorand Attribute Selectorsto assignmetathe first Open Graph image it selects. A similar task is performed to get the body. Finally, string interpolationis used to assign bodythe background.stylethe value of the path to the Open Graph image.
上面使用document.querySelector和属性选择器来分配meta它选择的第一个开放图图像。执行类似的任务以获取body. 最后，串内插用于分配body的background.style路径到打开图图像的值。
If you want the image to cover the entire viewportand stay fixed set background-sizelike so:
如果您希望图像覆盖整个视口并保持固定设置，background-size如下所示：
body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';
Using this approach you can set a low-quality background image placeholder using CSS and swap with a high-fidelity image later using an image onloadevent, thereby reducing perceived latency.
使用这种方法，您可以使用 CSS 设置低质量的背景图像占位符，然后使用图像onload事件与高保真图像交换，从而减少感知延迟。
