CSS

用图片代替文字标题

Apr 13th, 2008 Add Comment

用图片代替文字标题, 为什么要这样做呢? 在搭建网站的时候, 人们总是希望页面能吸引别人的目光, 所以常常会使用 Logo (图片标题). 但搜索引擎只对文字描述感兴趣. 为了做好 SEO 和兼顾用户感受, 我们要想办法在保留文字描述的基础上只显示图片.

使用图片代替文字, 确保 SEO 效果和人的视觉感受.

接下来我们看看该怎么弄, 先看看上面的图片, 它的代码是:

<h1 style="background-image:url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; width:276px; height:110px; text-indent:-999em;">Google</h1>

background-image: 背景图片
width: 图片宽度
height: 图片高度
text-indent: 这个是重点, 首行文本的缩进. 如果使用负值,那么首行会被缩进到左边. 当的负值足够大, 文字就会消失得无踪影了.

本方法在几乎所有浏览器中都可以使用.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 用图片代替文字标题

16 Comments 8 Trackbacks

英国搬家 | Nov 12th, 2011 at 08:55

好犀利的办法！
Haizhou | Mar 2nd, 2010 at 10:26

有个小问题：在分享或者转载一篇没有图片的日志时（比如renren或者facebook），无法抓取到合适的缩略图，但很多网站或者博客有自己固定的logo可供抓取缩略图。
不知怎解？
小志 | Aug 23rd, 2009 at 08:17

这样的方法我认为不好不值得推荐根本没有达到CSS的目的。

我的方法是再H1标签中加入span标签即WordPress

然后在CSS设置里将span标记的display属性变为none即可。这样就达到了隐藏文字显示图片啦！
迁安8 | Jun 14th, 2009 at 11:44

我的做法是图片加上描述文本。
不过还是纯文本的好，对于搜索引擎来说。
nemo | Jun 8th, 2009 at 15:51

这招不是早用过了吗，国外的书上早就介绍了，不过还是谢谢啊
老石 | Mar 22nd, 2009 at 19:15

呵呵学习了.最近才开始学HTML和CSS,是个绝对的菜鸟.向前辈学习了.
kubest | Sep 10th, 2008 at 21:18

学习中...
谢谢!
mg12 | Aug 25th, 2008 at 19:42

@JAY
我关了忘记开了.
JAY | Aug 25th, 2008 at 12:53

……还是没有被转义……我想说的就是a标签……mg12快恢复ajax comment edit吧……
我都快成水机了……
JAY | Aug 25th, 2008 at 12:52

啊……我上面写的标签没有被转义……
JAY | Aug 25th, 2008 at 12:51

text-indent

如果这个属性加在上面，在FireFox里面点击他的时候，你会看到那个虚线框会很诡异……
不过一般都会无视掉吧……
mg12 | Jun 14th, 2008 at 21:00

@束
都显示的, background 包含 background-image
束 | Jun 14th, 2008 at 00:55

好像浏览器不识别“background-image”，而是识别“background”
束 | Jun 14th, 2008 at 00:32

我正想找这么个教程，谢谢。
icyleaf | Apr 14th, 2008 at 09:47

这个方法不错～～
我记得还有别的方法也能实现，不过用到的CSS就多了点
Alan | Apr 13th, 2008 at 22:52

不知道为什么很讨厌用图片，但是图片的效果却好很多，真矛盾

Add Comment Read Article

CSS

用图片代替文字标题

使用图片代替文字, 确保 SEO 效果和人的视觉感受.

CSS, SEO, Tutorial