css隐藏文字的小技巧

Posted 2020-07-01

前段时间，在做项目的时候，遇到一个问题。背景图片上有一个“立即注册”的按钮，需要点击。但是问题是：现在的图片是背景图片，如果图片是在html页面内的话，我们可以使用锚点来对图片添加链接。这个时候，我们就可以使用隐藏文字的方法来对图片进行添加链接。

定义一个a的标签，使用绝对定位，覆盖到"立即注册"上面，像这样：

1. <a href="#">立即注册</a>

然后我控制字体隐藏

div{
text-index:-9999px;
background-image:url("#")；
display:block;
position:absolute;
}

background-image:url("#")；   这段代码主要是解决浏览器兼容性的。如果不加这句话的，在ie以下将不会起到作用，即还是点击不到。

接下来介绍一下另外几种隐藏文字的方法：

1. display:none; 不为隐藏的对象保留物理占位空间
2. visibility:hidden; 为隐藏的对象保留物理占位空间