css隐藏文字的小技巧
前段时间,在做项目的时候,遇到一个问题。背景图片上有一个“立即注册”的按钮,需要点击。但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接。这个时候,我们就可以使用隐藏文字的方法来对图片进行添加链接。
定义一个a的标签,使用绝对定位,覆盖到"立即注册"上面,像这样:
- <a href="#">立即注册</a>
然后我控制字体隐藏
div{
text-index:-9999px;
background-image:url("#");
display:block;
position:absolute;
}
background-image:url("#"); 这段代码主要是解决浏览器兼容性的。如果不加这句话的,在ie以下将不会起到作用,即还是点击不到。
接下来介绍一下另外几种隐藏文字的方法:
- display:none; 不为隐藏的对象保留物理占位空间
- visibility:hidden; 为隐藏的对象保留物理占位空间