CSS图片替换的最佳实践

开发 前端
我们在做网站的时候,有时候需要把网站的Logo用图片代替,这样的方法有很多,但是那一种是最好的呢?最简单的最容易想到的办法自然就是使用图片了。

我们在做网站的时候,有时候需要把网站的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-imageurl(image.gif);  
  3. background-repeatno-repeat;  
  4. width256px;  
  5. height41px;  
  6. }  
  7. h1 span {  
  8. positionabsolute;  
  9. left: -999em;  

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

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

解决办法

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

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

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

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

  1. h1, h1 span {  
  2. width256px;  
  3. height41px;  
  4. background-imageurl(image.gif);  
  5. font-size100%;  

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

  1. h1 span {  
  2. displayblock;  
  3. positionrelative;  
  4. z-index1;  
  5. margin-bottom-41px;  

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

***设置overfolw,这样就算文字再大,也不会撑开:

  1. h1{overflow:hidden

 

 

原文链接:http://rockux.com/archives/css%E5%9B%BE%E7%89%87%E6%9B%BF%E6%8D%A2

【编辑推荐】

  1. AJAX/PHP/JQuery/CSS设计拖拉式购物车
  2. 使用CSS框架的四大优点四大不足
  3. 推荐23款超赞超实用的CSS3小工具
  4. 27 款经典的CSS框架 附下载
  5. 20个HTML 5和CSS3的免费网站模板与教程
责任编辑:陈贻新 来源: RockUX
相关推荐

2012-03-29 09:35:32

WEBCSS

2012-03-19 09:55:38

CSS

2023-09-13 08:00:00

JavaScript循环语句

2015-09-15 16:01:40

混合IT私有云IT架构

2016-12-27 08:49:55

API设计策略

2011-08-18 11:05:21

jQuery

2023-07-21 01:12:30

Reactfalse​变量

2011-06-27 09:47:37

HTML 5

2009-12-11 10:02:26

2011-12-27 15:42:13

2013-05-22 15:29:28

微软云计算微软公有云Windows Azu

2011-07-26 10:03:11

ITIL实施ITIL流程认证

2017-02-28 21:57:05

React组件

2022-07-07 08:00:00

VDI虚拟化虚拟桌面

2013-06-09 10:38:54

IT运维管理运维管理ITIL管理

2018-04-04 04:26:09

2012-02-17 16:41:38

云计算SaaS

2013-09-17 11:28:48

2009-07-28 09:54:23

.NET内存管理

2024-01-05 00:33:23

点赞
收藏

51CTO技术栈公众号