思洋互动网站建设学前班

我们在做网站的时候，有时候需要把网站的Logo用图片代替，这样的方法有很多，但是那一种是最好的呢?
广州网站建设,网站建设,广州网页设计,广州网站设计

使用图片

最简单的最容易想到的办法自然就是使用图片了。然后给图片添加一个alt值，对搜索引擎友好一些。

1. <h1><img src="image.gif" alt="Image Replacement"></h1> 

这样做的缺点就是对搜索引擎不友好，搜索引擎对于图片alt属性的权重肯定是低于H1的，就算你的图片是放在H1标签里面。

移开文字

这也是比较常见的一种办法，就是使用display:none来隐藏文字，让用户不可见。

给文字加一个span标签，就可以分别控制了。

1. <h1><span>Image Replacement</span></h1> 

CSS部分：

1. h1 {  
2. background-image: url(image.gif);  
3. background-repeat: no-repeat;  
4. width: 256px;  
5. height: 41px;  
6. }  
7. h1 span {  
8. position: absolute;  
9. left: -999em;  
10. } 

这样做的好处在于使用CSS让文字对于用户不可见，但是搜索引擎还是能看到的。

之前很多都是使用这样的方法，但是这样做有个不好的地方在于，如果用户在浏览的时候关闭了图片显示，那么Logo部分就是空的了，这样体验很不好。
广州网站建设,网站建设,广州网页设计,广州网站设计

解决办法

最终的解决办法比较复杂一些，但是最终兼顾了所有方面，包括用户体验和搜索引擎。

HTML的结构跟之前的有些不同，我们需要一个空的span标签。

1. <h1><span></span>Image Replacement</h1> 

然后跟之前一样，设置宽高、背景图片、font-size：

1. h1, h1 span {  
2. width: 256px;  
3. height: 41px;  
4. background-image: url(image.gif);  
5. font-size: 100%;  
6. } 

然后我们通过一些技巧来隐藏文在在图片之下，这样用户关闭图片的时候也能看到文字。

1. h1 span {  
2. display: block;  
3. position: relative;  
4. z-index: 1;  
5. margin-bottom: -41px;  
6. } 

通过定义z-index就把图片显示在文字之上了。我们还需要更改display:block这样宽高才能应用在span之上，还需要添加margin-bottom让文字不会显示在图片下面。

最后设置overfolw，这样就算文字再大，也不会撑开：

1. h1{overflow:hidden}