Fatal编程技术网
  • javascript/
  • Javascript 更改身体中的背景图像

Javascript 更改身体中的背景图像

javascript css

Javascript 更改身体中的背景图像,javascript,css,Javascript,Css,如何在运行时更改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, Helve

如何在运行时更改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。您可以为身体设置背景图像的样式，如下所示

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>


$（文档）.ready（函数（）{
$（'body'）.css（'background-image'，'url（../images/backgrounds/header-top.jpg'）；
});
只需在车身上设置一个onload功能：

<body onload="init()">
您可以根据某些条件将“someimage”变量更改为您想要的任何内容，例如一天中的某个时间或某物，并且该图像将被设置为背景图像。

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

<script>
  const meta = document.querySelector('[property="og:image"]');
  const body = document.querySelector("body");
  body.style.background = `url(${meta.content})`;
</script>
使用这种方法，您可以使用CSS设置低质量的背景图像占位符，然后使用image
onload
事件与高保真图像交换，从而减少感知延迟。

您好，谢谢，但我没有从下面的代码中得到任何更改。var body=document.getElementsByTagName（'body'）[0]；body.style.backgroundImage=''；您需要将它放在body标签的末尾，或者在加载文档时调用它。感谢您提供此解决方案。只有一个问题；为什么不使用
document.body
而不是
document.getElementsByTagName（'body'）[0]
？IIRC
document.body
是DOM级别0，历史上受到广泛支持。如果文档MIME类型未设置为
text/html
或
application/xhtml+xml
，则Firefox可能无法正确处理，因此不推荐使用此选项。我尝试在html中应用您的代码，但未做任何更改$（'body'）.css（'background-image'，'url（../images/backgrounds/header-top1.jpg'）；需要指出的是，最初的问题要求一个严格的javascript答案，这使用了jquery。下面的答案是根据实际问题的正确方法。不知道为什么这会被选为最佳答案。答案以“如果你已经加载了JQuery…”开头，这是很多网站都已经做过的。对于纯javascript代码，你必须使用
背景
语法，而不是
背景图像
。e、 q.
element.style.background=“url（'/img/loading/loading.gif'）无重复中心”
<script>
  const meta = document.querySelector('[property="og:image"]');
  const body = document.querySelector("body");
  body.style.background = `url(${meta.content})`;
</script>

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