图片路径可以是绝对路径、根相对路径和文档相对路径
绝对路径是包括服务器协议的完全路径,比如“百度主页”,完全路径为:http://www.baidu.com/index.htm,如果所要链接当前站点之外的文档,就必须使用绝对路径。
相对路径包括根相对路径(Site Root)和文档相对路径(Document)两种。
根相对路径(也称相对跟目录)的路径以“/”开头,路径是从当前站点的根目录开始计算。比如我们前面建的D盘myweb目录就是名为“myweb”的站点,这时“/index.htm” 路径,就表示文件位置为D:\myweb\index.htm。根相对路径适用于链接内容频繁更换环境中的文件,这样即使站点中的文件被移动了,其链接仍可以生效。
文档相对路径就是指包含当前文档的文件夹,也就是以当前网页所在文件夹为基础开始计算路径。比如,当前网页所在位置为 D:\myweb\mypic,那么:
“a.htm”就表示 D:\myweb\mypic\a.htm;
“../a.htm”相当于 D:\myweb\a.htm,其中“../”表示当前文件夹上一级文件夹。
“img/a.gif”是指 D:\myweb\mypic\img\a.gif,其中“img/”意思是当前文件夹下名为 img 文件夹。
文档相对路径是最简单的路径,一般多用于链接保存在同一文件夹中的文档。
用Css设置图片的位置的话:1.通过position的绝对定位,然后在通过left和top就可以设置你的图片位置了;代码如下
<div style='position:absolutleft:0pxtop:0px'>
<img src='图片地址'>
</div>
2.通过div+css的布局来实现给定一个包裹图片的div默认位置就行,代码如下
<div>
<div style='flaot:leftwidth:330pxheight:200px'>
<p>我是左边的</p>
</div>
<div style='flaot:leftwidth:330pxheight:200px'>
<img src='图片地址'>
</div>
</div>
你可以使用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)" //都是使用驼峰写法~~~
}
---------------------------------------------------------------