现在的位置: 网页制作教程网站制作经验 >正文
CSS

H1如何用图片代替文字显示

发表于2017/1/6 网站制作经验 0条评论 ⁄ 热度 1,613℃

基于网站seo和页面美观的角度考量,我们有时会需要将好h1标签内的文字用图片替代显示,常用于logo的显示。

比如:打开页面,h1处显示的是logo图片,查看源代码后发现,H1闭合标签里包含着关键词文字。我们看下面一段代码:

<style type="text/css">
body.index h1 {width: 30%; height: 130px; margin-left: 0; background: url(/images/logo.png) no-repeat 50% 50%; text-indent: -9999px;}
body.index h1 a {display: block; height: 130px;}
</style>
<h1><a href="/" title="seo关键词">关键词</a></h1>

我们可以看到css代码中有个text-indent: -9999px;,我们知道text-indent是用来设置段落开头第一个字留白的位置,而这里设置成-9999px,效果就是文字超出边界,用户看不到文字只能看到背景图片了。

通过css的设置,就达到了h1标签里图片代替文字显示给用户效果,而查看源代码,任然可以看到关键词文字。

  • 暂无评论