网站后台管理系统软件网站seo优化案例

让超链接内翰墨埋伏掉css技巧结构办法

无心div css网页组织时，运用超链接a标签，但重要将文字窜伏，但超链接又不失效的需求。比喻图片或图标的超链接，把图片或图标作为布景图片，上面应用超链接a加文字，但又不想让文字显示，超链接具有的又大要点击，图片也可以瞥见这个时刻即是隐藏超链接文字。

应用CSS属性单词：text-indent

text-indent引见：

文本内容缩进属性，思空见贯用于文段开头文字缩进两个笔墨，好比文章段落每段缩进两个汉字设置text-indent便可。

要隐藏也是有text-indent来实现，例如设置装备摆设text-indent:-999px或text-indent:-9999px让对象内文字往前缩进9999px抵达潜伏感导。

超链接具备文字匿伏css结构案例如下：

1、案例代码

超链接存在笔墨埋伏 在线演示 - www.CSS5.com

.logo{ margin:0 auto;width:175px; height:51px;

bac千克round:url(CSS5logo.gif) no-repeat 0 0}

.logo a{ display:block; width:100%; height:100%; text-indent:-9999px}

配置一个class=logo的盒子，配置CSS5的站点logo为背景图片，配置宽度与高度。

2、案例截图

css机关超链接内翰墨隐藏，同时超链接也具备

3、案例分析

首先”.logo”抉择器内设置css宽度、css高度、logo图片作为后台；

再对class=logo对象内超链接a配置造成块(让超链接a宽高失效)、设置宽度与高度，同时设置 text-indent:-9999px埋伏超链接内的翰墨。只管何等翰墨隐藏了，但超链接和布景图片留存了。