css隐藏文字的小技巧

前段时间,在做项目的时候,遇到一个问题。背景图片上有一个“立即注册”的按钮,需要点击。但是问题是:现在的图片是背景图片,如果图片是在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; 为隐藏的对象保留物理占位空间
时间: 2024-08-28 05:53:17

css隐藏文字的小技巧的相关文章

CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找了一下CSS隐藏文字的方法,有以下几条: 1.display:none; 这个大家普遍说法是,搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,不为隐藏的对象保留物理占位空间.GG也搜CSS文件?不过如果用这个方法,<h1>如何设计,也是难题. 2.visibility:hidden; 和disp

css选择器顺序的小技巧

在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧. 首先是li标签的样式,这里就不说了,主要说一下hover的操作. 显示ul的hover,让所有的li标签缩短宽度. ....... 原文来自:css选择器顺序的小技巧

职场办公必备:快速将图片转文字的小技巧

相信办公中或者学习中的小伙伴们经常会遇到这样的问题,有时候需要将图中文字提取应用到别的地方去,但是手动输入图中文字的效率太低了,不建议大家这样去做,那有什么好的方法呢?接下来,小编就来为大家分享一种快速将图片转文字的方法,超实用的哦! 辅助工具:迅捷OCR文字识别软件 使用具体文字识别软件的方法适用于那些在办公或者学习中经常处理到文字图片需要进行识别转换的朋友,工具在手,就可以方便随时实现转换了,下面一起来看看具体的操作步骤吧. 第一步.打开电脑中的OCR文字识别软件,关闭弹窗点击界面上方图片局

css的几个小技巧

本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设置position:relative,目标标签设置margin:auto .parent { position: relative } .target { margin:auto } 垂直居中 设置line-height与父级元素height相同 div { width:200px; height:

Android——隐藏输入法的小技巧

今天偶然在百度地图提供的DEMO里看到这样一段代码,觉得确实是个小技巧,就写下来分享一下. 针对的问题: 我们在开发android界面的时候,经常使用EditText控件,然后每次进入这个页面的时候,获取焦点,自动调用输入法.有时候我们并不需要这样,接下来就是这个小技巧的代码了,加入到这个布局第一个EditText之前即可: <!-- 隐藏输入法用 --> <LinearLayout android:layout_width="0px" android:layout_

几种处理文字的小技巧

通过CSS可以对文字有很不错的处理效果.以下就简单的整理几种文字处理技巧.持续更新. 一.文字溢出:text-overflow 基本的式样如下: 1 .huanhang { 2 display: block; /*必须是块级元素*/ 3 white-space: nowrap; /*不换行*/ 4 text-overflow: ellipsis; /*用省略号代表溢出*/ 5 overflow: hidden; /*不允许出现滚动条*/ 6 width: 100px; /*必须要指定宽度,才能知

Firebug折腾记_(2)HTML&amp;CSS定位及调试小技巧

题外话 传统的开发我们是在编辑器操作代码保存,再到浏览器预览查看效果的; 而如今的firebug和chrome的内置调试器就不需要了..可以直接实时编辑且看到效果; 在调试中对代码的操作不会保存到本地实际代码中..是不是很赞!!; 定位HTML元素的三种方式 进入调试工具界面,按下"瓢虫"旁边的小鼠标,再进行网页元素的选择 默认快捷键,Ctrl + shift + C 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素 HTML及CSS简单调试 ##HTML元素编辑 除了

HTML+CSS - 前端设计的小技巧(持续更新......)

2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样式  *  内,设置UL标签无样式,图片无边框,margin和padding都为0. 4.取消浮动Clear. :clear:left   取消左浮动 5.图片按钮   ImageButton控件 SRC属性,设置图片的路径. 6.服务器空间,在网页中也是input控件,所以,直接设置input属性

语音怎么在线转文字,语音转文字的小技巧

在办公中经常需要将语音文件转换成文字格式,比如说在领导开会的时候需要将开会的内容录音下来,并以文本的形式发送给领导,这个时候我们是将语音文件一边听一边手打输送出来嘛,其实根本就不需要这么麻烦的.今天小编就给大家介绍一种在线将语音转换成文字并且可以同步为英文的操作方法.操作工具:[迅捷语音云服务]第一步:将需要转换成文字的语音在电脑上准备好,然后再通过电脑浏览器搜索迅捷语音云服务,来帮助我们进行转换.第二步:进入到语音与服务页面后,在页面中心可以看到两个转换选项,根据需要从中选择语音转文字的选项即