在css文件中定义img的src

html-css015

在css文件中定义img的src,第1张

你可以使用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!!