html5背景图片能加链接,CSS中用背景图片做为超链接的方法

2023-05-16

33c6ee5f447d6234f4211ca4fc137a57.png

Web2.0时代,在网页设计中用背景图片做为超链接已成为主流,通过CSS的控制,使鼠标移到图片上能有很好的变换效果,虽然用普通的插入图片的方法也能实现效果,但用CSS更为方便,再配合css sprite,还能加快图片的加载。所以今天就向大家介绍CSS中用背景图片做为超链接的方法。

实现这样的效果只需要直接在div中加上一个空的超链接,然后通过CSS来控制,CSS设置的关键是要加上display:block;和cursor:hand;这样鼠标移上去就会有超链接的感觉,如果你设计一个好看的背景的话效果真的不错,具体的代码如下所示,下面代码中为了方便理解,用到了两张背景图片,你也可以把图片做在一起,通过css sprite来控制:html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS中用背景图片做为超链接的方法_HTMer

.htmer a{margin:0px;padding:0px;background:url(images/htmer_bg.jpg) no-repeat;display:block;width:87px;height:36px;cursor:hand;}

.htmer a:hover{background:url(images/htmer_bg_hover.jpg) no-repeat;}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html5背景图片能加链接,CSS中用背景图片做为超链接的方法 的相关文章

随机推荐