内蒙古11 选5前二:让超链接文字隐藏掉css代码(图文DIV CSS代码实例)

让超链接内文字隐藏掉css技巧布局方法

有时div css网页布局时,使用超链接a标签,但需要将文字隐藏,但超链接又不失效的需求。比如图片或图标的超链接,把图片或图标作为背景图片,上面使用超链接a加文字,但又不想让文字显示,超链接存在的又可以点击,图片也可以看见这个时候就是隐藏超链接文字。

使用CSS属性单词:text-indent

text-indent介绍:
文本内容缩进属性,常见用于文段开头文字缩进两个文字,比如文章段落每段缩进两个汉字设置text-indent即可。

要隐藏也是有text-indent来实现,比如设置text-indent:-999px或text-indent:-9999px让对象内文字往前缩进9999px达到隐藏作用。

超链接存在文字隐藏css布局案例如下:

1、案例代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>超链接存在文字隐藏 在线演示 - 内蒙古11选五开奖5号的 www.phlmy.com </title>
<style>
.logo{ margin:0 auto;width:175px; height:51px;
background:url(thinkcsslogo.gif) no-repeat 0 0}
.logo a{ display:block; width:100%; height:100%; text-indent:-9999px}
</style>
</head>
<body>
<div class="logo"><a href="//www.phlmy.com/">thinkcss网站</a></div>
</body>
</html>

设置一个class=logo的盒子,设置thinkcss的网站logo为背景图片,设置宽度和高度。

2、案例截图

css布局超链接内文字隐藏,同时超链接也存在
css布局超链接内文字隐藏,同时超链接也存在

3、案例解析
首先”.logo”选择器内设置css宽度、css高度、logo图片作为背景;
再对class=logo对象内超链接a设置形成块(让超链接a宽高生效)、设置宽度和高度,同时设置 text-indent:-9999px隐藏超链接内的文字。当然这样文字隐藏了,但超链接和背景图片保留了。

4、在线演示

查看案例

5、打包下载

特点:常常用于图标超链接按钮、网站logo,需要隐藏图片上方文字,而超链接锚文本不受影响。

相关标签: 超链接 隐藏 背景
如需转载,请注明文章出处和来源网址://www.phlmy.com/jiqiao/1466.shtml

日期:2017-11-21 18:03:54 来源:ThinkCSS 作者:thinkcss原创

热门点击

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 广东十一选五奖金走势图 少儿围棋单机游戏 排列三走势图连线带坐标走势图 牛彩版彩图库 福采东方6+1 彩票开奖查询排列3 澳洲幸运10冠军计划 两肖两码中特期期100准 天津11选5蛋托玩法 二肖中特期期准黄大仙 中国福利彩票开奖公告 内蒙古快三开奖 新疆18选7开奖规则 兑奖中心会给彩票掉包吗 强胆推荐