你可以使用jq来改变,,
css:
<style>
.div{
background:url("test.jpg") no-repeat
border:solid 1px red
height:200px
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
$(".div").click(function(){ //写了点击测试效果
$(this).css({
"background" : "url('menu.jpg') no-repeat",
"borderColor" : "blue"
})
})
})
</script>
html:
<div class="div" onclick="changeBg(this)"></div>
测试:
初始
点击后
js:
---------------------------------------------------------------
function changeBg(obj){
obj.style.backgroundImage="url(menu.jpg)" //都是使用驼峰写法~~~
}
---------------------------------------------------------------
下面代码控制图片大小150*150,可以自行修改,建议图片大小在150左右,这样不会损失图片的美感。多余部分隐藏了;比如,你的图片是150*200,那么在高的方向会截取,隐藏掉;<style>
img {
max-width:150px
width:150px
width:expression(document.body.clientWidth>150?"150px":"auto")
overflow:hidden
}
</style>
示例 引用图片 注意路径 我的在目录下"tp"文件夹:
<img border="0" src="tp/111.JPG">
Good luck!!