更改正文中的背景图像

change background image in body

本文关键字：背景 图像 正文      更新时间：2023-09-26
如何在

运行时更改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样式。

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)');

编辑：

首先在头标签中加载 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="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事件与高保真图像交换，从而减少感知延迟。

相关文章：