基于网站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标签里图片代替文字显示给用户效果，而查看源代码，任然可以看到关键词文字。
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/505.html
