编写网页代码中 LOGO 的处理

Question

一个网站一定要有一个 LOGO，他属于模版中的一部分，很多人都是使用的 IMG 标签插入 LOGO 图片，然后给 LOGO 图片加上 Alt 文字描述，其实这样是不利于优化的，下面的两种方法或许更适合你。

利用 text-indent 隐藏文本

大家都知道 text-indent 可以让文本或者是图片偏移，常用于段落前空两个字的位置，不过这个也可以用于 LOGO 上面的设置

h1 {
  text-indent: -9999px;
  margin: 0 auto;
  width: 320px;
  height: 85px;
  background: transparent url("images/logo.png") no-repeat;
}

利用 Padding 隐藏文本

如果设置了背景图，Padding 属性不会影响背景图片的位置，所以可以这样设置

h1 {
  margin: 0 auto;
  width: 0;
  height: 85px;
  padding-left:320px;
  overflow:hidden;
  background: transparent url("images/logo.png") no-repeat;
}

设置 padding-left 的值就是 LOGO 的宽度，整个容器的宽度为 0，又设置了超出部分隐藏，所以多余的文字不会显示出来。