css里a标签加背景无法显示,求救!!!
<style>a.test{background-image:url(C:\Users\jim\Desktop\design\1_s.jpg);display:block...
<style>
a.test{ background-image:url(C:\Users\jim\Desktop\design\1_s.jpg); display:block;}
a.test:hover{ background-image:url(C:\Users\jim\Desktop\design\2_s.jpg); display:block;}
.center{ width:550px; height:400px;}
</style>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" class="test"><div class="center"></div></a></td>
</tr>
</table>
<div class="center">
<img src="C:\Users\jim\Desktop\design\1_s.jpg" border="0">
</div>
最后的DIV是我自己测试图片路径有没有问题的(图片没问题,估计不关路径问题),在所有浏览器里都只能显示一片空白,链接有效,能点击,但是背景是怎么也不出来,求大神们指点.....
顺带问一个,transition属性那个backgroung-image的设置要怎么设置?,我想鼠标hover时显示另外一张背景时有一个延时的效果,但是不知道怎么兼容,是用在淘宝的自定义框里的,求大大门指点迷津!!!! 展开
a.test{ background-image:url(C:\Users\jim\Desktop\design\1_s.jpg); display:block;}
a.test:hover{ background-image:url(C:\Users\jim\Desktop\design\2_s.jpg); display:block;}
.center{ width:550px; height:400px;}
</style>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" class="test"><div class="center"></div></a></td>
</tr>
</table>
<div class="center">
<img src="C:\Users\jim\Desktop\design\1_s.jpg" border="0">
</div>
最后的DIV是我自己测试图片路径有没有问题的(图片没问题,估计不关路径问题),在所有浏览器里都只能显示一片空白,链接有效,能点击,但是背景是怎么也不出来,求大神们指点.....
顺带问一个,transition属性那个backgroung-image的设置要怎么设置?,我想鼠标hover时显示另外一张背景时有一个延时的效果,但是不知道怎么兼容,是用在淘宝的自定义框里的,求大大门指点迷津!!!! 展开
4个回答
推荐于2017-06-21
展开全部
首先不要用硬盘上的绝对路径:C:\Users\jim\Desktop\design\1_s.jpg
改为文件夹相对路径,自己百度:网站 相对路径
a.test{}改为.test,前面加个a多此一举
然后你<a>里面没东西,是空的,没高度,背景就显示不出来。
要写成:<a href="#" class="test">某个链接</a>,或给<a>设置高度,才能有显示背景的范围
改为文件夹相对路径,自己百度:网站 相对路径
a.test{}改为.test,前面加个a多此一举
然后你<a>里面没东西,是空的,没高度,背景就显示不出来。
要写成:<a href="#" class="test">某个链接</a>,或给<a>设置高度,才能有显示背景的范围
展开全部
<style>
a { display:block;
width:550px;
height:400px;
background-image:url(file:///C|/Users/gdd/Desktop/1.png);
transition:background-image 2s;
-moz-transition:background-image 2s; /* Firefox 4 */
-webkit-transition:background-image 2s; /* Safari and Chrome */
-o-transition:background-image 2s; /* Opera */}
a:hover{ background-image:url(file:///C|/Users/gdd/Desktop/2.png);}
.center{ width:550px; height:400px;}
</style>
<body>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"><div class="center"></div></a></td>
</tr>
</table>
<div class="center">
<img src="C:\Users\gdd\Desktop\1.png" border="0">
</div>
图片路径有问题,最好放在一个站点里用相对路径。
还有transition这个属性也加在上面了测试一下吧。这个属性在IE上只支持IE10版本
a { display:block;
width:550px;
height:400px;
background-image:url(file:///C|/Users/gdd/Desktop/1.png);
transition:background-image 2s;
-moz-transition:background-image 2s; /* Firefox 4 */
-webkit-transition:background-image 2s; /* Safari and Chrome */
-o-transition:background-image 2s; /* Opera */}
a:hover{ background-image:url(file:///C|/Users/gdd/Desktop/2.png);}
.center{ width:550px; height:400px;}
</style>
<body>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#"><div class="center"></div></a></td>
</tr>
</table>
<div class="center">
<img src="C:\Users\gdd\Desktop\1.png" border="0">
</div>
图片路径有问题,最好放在一个站点里用相对路径。
还有transition这个属性也加在上面了测试一下吧。这个属性在IE上只支持IE10版本
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2014-08-12
展开全部
这个肯能是你路径问题 你直接使用直接路径测试下降知道咯
比如:
<style>
a.test{ background-image:url(http://storage.ipbun.cn/framework/graphics/ipbun/logo.png); display:block;}
a.test:hover{ background-image:url(http://pan.ipbun.cn/c/2014/simmonstaiwan.com.tw/1.gif); display:block;}
.center{ width:550px; height:400px;}
</style>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#" class="test"><div class="center"></div></a></td>
</tr>
</table>
<div class="center">
<img src="http://storage.ipbun.cn/framework/graphics/ipbun/logo.png" border="0">
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
url(C:\Users\jim\Desktop\design\1_s.jpg);
这是指向你硬盘的文件,同学,本机自然OK,但别人在浏览时,会试图在别人的C盘去找文件,当然是空白,请上传图片到服务器后,以”/路径/文件名“来重写。
这是指向你硬盘的文件,同学,本机自然OK,但别人在浏览时,会试图在别人的C盘去找文件,当然是空白,请上传图片到服务器后,以”/路径/文件名“来重写。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询