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

来自:互联网
时间:2019-10-08
阅读:

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

需求介绍

1、给A标签加入背景图片,并显示背景图片mnk免费资源网

2、A标签要正常的写法,在源码中不能改变其代码的格式。mnk免费资源网

3、在浏览器的展示中,要把A标签的文字隐藏掉,只展示背景图片,不展示文字mnk免费资源网

解决方案

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

HTML代码mnk免费资源网

<a href="http://freexyz.cn" >免费资源网</a>

CSS代码mnk免费资源网

a{
    background-image: url(https://www.freexyz.cn/img/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
}

显示效果:mnk免费资源网

HTML隐藏A标签文字,隐藏A标签标题,隐藏A标签mnk免费资源网

根据上面的显示结果,可以看到A标签的文字还是存在的,我们该如何把文字隐藏掉呢?mnk免费资源网

给A标签的CSS属性加入,'text-indent'mnk免费资源网

text-indent:属性规定文本块中首行文本的缩进。mnk免费资源网

CSS代码mnk免费资源网

a{
    background-image: url(https://www.freexyz.cn/img/logo.png);
    background-repeat: no-repeat;
    width: 240px;
    height: 70px;
    display: block;
    text-indent: -9999px;
}

显示效果mnk免费资源网

HTML隐藏A标签文字,隐藏A标签标题,隐藏A标签mnk免费资源网

这次示显结果中,A标签的文字已经消失掉了(其实是被缩进到了左边)mnk免费资源网

完整的代码示例:

以下代码,你们复制到本地在浏览器中进行查看,也可以自己编辑看一下效果。mnk免费资源网

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    a{
        background-image: url(https://www.freexyz.cn/img/logo.png);
        background-repeat: no-repeat;
        width: 240px;
        height: 70px;
        display: block;
        text-indent: -9999px;
    }
    </style>
</head>
<body>
    <a href="http://freexyz.cn" >免费资源网</a>
</body>
</html>
返回顶部
顶部