html中怎么在图片中隐藏文字,html中隐藏A标签的文字并显示背景图片

在前端web的设计中，有时候为了seo需要做一些不合常理的规划，所以在我们这里做SEO的小组经常和做前端的小组干仗的。今天就说一个SEO小组提出的HTML前端设计方案中的一个小需求，给大家参考一下。

需求介绍

1、给A标签加入背景图片，并显示背景图片

2、A标签要正常的写法，在源码中不能改变其代码的格式。

3、在浏览器的展示中，要把A标签的文字隐藏掉，只展示背景图片，不展示文字

解决方案

上面的需求主要就是说出一点，隐藏掉A标签的文字，并不是隐藏掉A标签，所以我们可以用CSS来实现。

HTML代码

免费资源网

CSS代码

a{

background-image: url(https://www.freexyz.cn/img/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.freexyz.cn/img/logo.png);

background-repeat: no-repeat;

width: 240px;

height: 70px;

display: block;

text-indent: -9999px;

}

显示效果

这次示显结果中，A标签的文字已经消失掉了(其实是被缩进到了左边)

完整的代码示例：

以下代码，你们复制到本地在浏览器中进行查看，也可以自己编辑看一下效果。

html>

Document

a{

background-image: url(https://www.freexyz.cn/img/logo.png);

background-repeat: no-repeat;

width: 240px;

height: 70px;

display: block;

text-indent: -9999px;

}

免费资源网