在背景色功能下添加背景圖像

我有三個功能在我的交互式寵物上運行（更改背景，調光燈，鼠標跟隨）。我正在嘗試將圖像添加到身體背景，但每次嘗試時都會將其推到頂部，並且髒/清潔背景功能不起作用。有人能告訴我如何改變下面第一個功能的顏色部分來切換圖像而不是顏色代碼？我認爲這將解決眼前的問題。：/在背景色功能下添加背景圖像

CSS代碼：

//change background color: dirty/clean tank 
setTimeout(function dirty() { //sets background color to murky green 
document.body.style.backgroundColor = ****"#CCCC99";** //would like this to be an image** 
var btn = document.body.appendChild(document.createElement('button')); 
btn.appendChild(document.createTextNode("Clean the tank!")); 
    document.body.style.marginTop = "-1000px"; 

btn.onclick = function clean() { 
    btn.parentNode.removeChild(btn); 
    document.body.style.backgroundColor = **"#CCFFFF";//would like this to be an image** 
    setTimeout(dirty,27000); //how long it takes to make the tank dirty 
}; 
},500); //first loading of clear blue timeout 


//dim the lights 
var dimmed = 0; 
function toggleLights() 
{ 
var dimmer = document.getElementById("dimmer"); 
if(dimmed == 0) dimmed = 1; 
else dimmed = 0; 

if(dimmed == 1) 
{ 
    dimmer.style.opacity = 0.8; 
    dimmer.style.visibility = "visible"; 
} 

if(dimmed == 0) 
{ 
    dimmer.style.opacity = 0.0; 
    dimmer.style.visibility = "hidden"; 
} 
} 


//fish moves on mouse hover 
$(document).ready(function() { 
$("#swim").mousemove(function (event) { 
var fish = $("#fish1"); 
var position = fish.position(); 
var mousey = event.pageX; 


if (position.left > mousey) { 
    $("#fish1").html("<img src='images/happy.png' />"); 
} else { 
    $("#fish1").html("<img src='images/happyback.png'/>"); 
} 

$("#fish1").stop().animate({ 
    left: event.pageX, 
    top: event.pageY 
}, 300); 
}); 
});

HTML代碼：

<HTML> 
<HEAD> 
<TITLE>Untitled</TITLE> 


<link href="style.css" rel="stylesheet" type="text/css" /> 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" 
</script> 
<script type="text/javascript" src="pet.js"></script> 
<script type="text/javascript" src="core.js"></script> 

</HEAD> 



<div id="table"> 
<div id="dimmer" onClick="toggleLights()"></div> 
<a href="javascript:toggleLights();"><img src="images/table-lamp.png" height="380px" 
alt="table lamp"></a> 
</div> 


<div id="swim"> 
<div id="fish1"><img src="images/happy.png"/></div> 
</div> 

</BODY> 
</HTML>

來源

2013-02-04 Jen

添加在你的HTML起始<body>標籤，並更改元素類使用JavaScript，而不是樣式屬性。這樣你可以通過CSS文件更好地控制樣式。

所以，你會做這樣的事情：

document.body.className = 'state1';

而在你的CSS

.state1{ 
    background-image: url(the/image.jpg); 
}

等等...

來源

2013-02-04 04:57:03

在背景色功能下添加背景圖像

回答

相關問題