css中怎么把定义动画背景图片加超链接

html-css013

css中怎么把定义动画背景图片加超链接,第1张

css是无法加超链接的,但是你可以在一个A标签下设置背景图片啊。

.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} // 不让图片带有边框