为了未来好一点，现在苦一点有什么。都要更有勇气对明天说：我愿意。养成好习惯是储存健康，放纵不良是透支生命。梦不是为想象，而是让我们继续前往。
在前端web的设计中，有时候为了seo需要做一些不合常理的规划，所以在我们这里做SEO的小组经常和做前端的小组干仗的。今天就说一个SEO小组提出的HTML前端设计方案中的一个小需求，给大家参考一下。
需求介绍
1、给A标签加入背景图片，并显示背景图片
2、A标签要正常的写法，在源码中不能改变其代码的格式。
3、在浏览器的展示中，要把A标签的文字隐藏掉，只展示背景图片，不展示文字
解决方案
上面的需求主要就是说出一点，隐藏掉A标签的文字，并不是隐藏掉A标签，所以我们可以用CSS来实现。
HTML代码
<a rel="nofollow" href="http://feiniaomy.com" ></a>
CSS代码
a{
background-image: url(https:www.feiniaomy.com/zb_users/upload/Mochu_Feiniao/logo.png);
background-repeat: no-repeat;
width: 240px;
height: 70px;
display: block;
}显示效果：
根据上面的显示结果，可以看到A标签的文字还是存在的，我们该如何把文字隐藏掉呢？
给A标签的CSS属性加入，'text-indent'
text-indent：属性规定文本块中首行文本的缩进。
CSS代码
a{
background-image: url(https:www.feiniaomy.com/zb_users/upload/Mochu_Feiniao/logo.png);
background-repeat: no-repeat;
width: 240px;
height: 70px;
display: block;
text-indent: -9999px;
}显示效果
这次示显结果中，A标签的文字已经消失掉了(其实是被缩进到了左边)
完整的代码示例：
以下代码，你们复制到本地在浏览器中进行查看，也可以自己编辑看一下效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
background-image: url(https:www.feiniaomy.com/zb_users/upload/Mochu_Feiniao/logo.png);
background-repeat: no-repeat;
width: 240px;
height: 70px;
display: block;
text-indent: -9999px;
}
</style>
</head>
<body>
<a rel="nofollow" href="http://feiniaomy.com" ></a>
</body>
</html> 以上就是html中隐藏A标签的文字并显示背景图片。青春就像是切洋葱，咱们都泪流满面，却还乐此不疲。更多关于html中隐藏A标签的文字并显示背景图片请关注haodaima.com其它相关文章！
![CSS如何实现图片垂直翻转的效果]("https://www.feiniaomy.com/zb_users/upload/2020/08/20200829213229159870794997259.jpg" )
