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; 为隐藏的对象保留物理占位空间
css隐藏文字的小技巧的更多相关文章
- CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- css的几个小技巧
本文收录css设置样式的一些小技巧 1. 设置文字在块级标签居中(包括水平居中和垂直居中) 水平居中 方法一:使用text-align text-align:center 方法二:目标标签的父级标签设 ...
- CSS中的一下小技巧2之CSS3动画勾选运用
使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...
- Android——隐藏输入法的小技巧
今天偶然在百度地图提供的DEMO里看到这样一段代码.认为确实是个小技巧,就写下来分享一下. 针对的问题: 我们在开发android界面的时候,常常使用EditText控件.然后每次进入这个页面的时候, ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- 25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...
- HTML+CSS - 前端设计的小技巧(持续更新......)
2015年7月6日20:28:20 1.设置文字的居中,非控件内的. :text-alain:center 2.图片在ASP.NET中,可以直接拖放到界面,自动形成img控件. 3.CSS直接在全局样 ...
- CSS绘制三角的小技巧
网页中常见一些三角形,使用css直接画出来就可以,不必做成图片或者字体图标当把一个盒子的高和宽的长度都设置为0,并且分别指定边框样式时,就会得到以下图形: 受此启发,可以知道三角是如何制作的(想要保留 ...
随机推荐
- 跟着刚哥梳理java知识点——包装类(十)
Java为8种基本数据类型都提供了对应的包装器类型 装箱和拆箱: public class Main { public static void main(String[] args) { Intege ...
- 关于在网页拼接时出现:提示Uncaught SyntaxError: missing ) after argument list;错误的原因分析
1:网页拼接不完善,可能哪里漏了:),},</XX>...等 2:如果有动态数据写入的话,请注意转义动态数据,如图(是转义后的内容,不会报错): 在写方法时:onclick中,注意单双引号 ...
- 为部署ASP.NET Core准备:使用Hyper-V安装Ubuntu Server 16.10
概述 Hyper-V是微软的一款虚拟化产品,和VMWare一样采用的hypervisor技术.它已经被内嵌到Win10系统内,我们只需要进行简单的安装即可.但是前提是要确保你的机器已经启用虚拟化,可以 ...
- Unity3D 协程 浅谈
协程 理解:协程不是线程,也不是异步执行(知道就行). 1.协程和MonoBehaviour的Update函数一样,也是在MainThread中执行的(一定得明白这句话意思). void Start ...
- Linux - atexit()(注册终止)函数
进程终⽌的⽅式有8种,前5种为正常终⽌,后三种为异常终⽌: 1. 从main函数返回: 2 .调⽤exit函数:3 .调⽤_exit或_Exit:4 .最后⼀个线程从启动例程返回:5 .最后⼀个线程调 ...
- python在cmd上导包成功,但是python charm上面就提示找不到
失败 成功 原因:我的python file名称和numpy 的名字一样了,把python file 的名字改了就好了
- Vuex(二)——关于store
一.总览 Vuex 应用的核心就是 store(仓库). "store" 包含着应用中大部分的状态(state). 二.Vuex 和单纯全局对象的不同 Vuex 的状态存储是响应式 ...
- CF #228 div1 B. Fox and Minimal path
题目链接:http://codeforces.com/problemset/problem/388/B 大意是用不超过1000个点构造一张边权为1的无向图,使得点1到点2的最短路的个数为给定值k,其中 ...
- 【知识必备】浅淡MVP在Android项目中的实战演习,让代码结构更简单~
一.写在前面 讲道理,这次是真的笔者很久都没有更新blog了,主要最近维护的框架问题也是层出不穷,而且对技术交流群的解答也让我身心疲惫,所以在这里跟关注我的人说声抱歉,没有定期给你们带来福利,那么这里 ...
- elasticsearch基础概念
接近实时(NRT) Elasticsearch是一个接近实时的搜索平台.这意味着,从索引一个文档直到这个文档能够被搜索到有一个轻微的延迟(通常是1秒). 集群(clu ...