<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>隐藏背景的链接</title> <meta http-equiv="x-ua-compatible" content="ie=7" /> <style type="text/css"> .t { width: 270px; height: 129px; display: block; border: solid 1px #e3e3e3; background:url(hide-a.htm)} .p { position: relative; left: 0px; top: -131px; z-index: 2; } </style> </head> <body> <div class="t"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="百度" /></div> <div class="p"><a href="http://www.ropean.net/" class="t"></a></div> </body></html>
把代码复制,能看到效果。 但请注意background:url(hide-a.htm) 我随便设置了一个background属性(设颜色也可)
这里Ie里position和display共用时,有Bug
但腾讯首页的banner广告就实现了这种效果,下面那个层,无论图片还是Flash均可正常显示。
所以请高手指点,该怎样实现这种效果!!!