如何在运行时更改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; }
小智 57
您需要使用Javascript.您可以background-image像这样设置身体的样式.
var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';
只需确保将URL替换为实际的 URL.
nat*_*ill 21
如果你已经加载了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>
小智 7
只需在body上设置一个onload函数:
<body onload="init()">
然后在javascript中执行以下操作:
function init() {
var someimage = 'changableBackgroudImage';
document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}
您可以根据某些条件(例如一天中的某个时间等)将"someimage"变量更改为您想要的任何值,并将该图像设置为背景图像.