.a{background:url(../images/v_line2.gif)
0
0
no-repeatwidth:100pxheight:30pxdisplay:block}
............
<a
href="xxx.html"
class="a"></a>
这样就OK了但是一定要注意设置display属性为block
或者inline-block才能有点击区域,不然<a></a>之间就要插入一张透明图片设置宽高如<a
href="xxx.html"
class="a"><img
src="透明图片地址"
width="100"
height="30"></a>
原理就是用相对&绝对定位来解决这个问题.<style
type="text/css">
.imgbox
{
width:200px
height:200px
background:#ddd
position:absolute}
.textbox
{
width:100px
height:20px
background:#eee
text-align:center
position:relative
margin:0px
auto
top:100px
margin-top:-10px}
</style>
说下这里的原理,margin:0px
auto,左右居中top:100px,因为外层盒子高度200px,所以100px是中间,首先将文字容器定位在这里,然后文字容器高度是20px,margin-top:-10px,向上10PX中线刚好是跟外部容器中线重合,这样就做到垂直集中.至于其他的字体间距大小这些就简单了吧.
<div
class="imgbox">
<div
class="textbox">123123</div>
</div>
你把这个图片当成背景了,是无法给其加链接的,这是其一;其二是,链接只能在HTML中添加。弄成这样: HTML代码: <div id="header"><a href="你要链接的地址"><img src=" http://hiphotos.baidu.com/xihailiu/pic/item/24349010beda58efa6ef3f2d.jpeg"></div></div> CSS代码: #header{ top:-2pxheight:437pxwidth:1024px} #header img { border:none} // 不让图片带有边框