你最喜欢的图片替换方法是什么，你如何选择使用?

对于这个问题既要考虑到用户体验又要考虑到搜索引擎

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

首先使用图片；然后给图片添加一个alt值，对搜索引擎友好一些。缺点：对搜索引移开文字擎不友好，搜索引擎对于图片alt属性的权重肯定是低于H1的，就算你的图片是放在H1标签里面。

2、移开文字

<h1><span>Image Replacement</span></h1> 

h1
{

background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; } 

span {

display: none; }
 

思路是：先将图片应用在
H2 的背景中，然后将 SPAN 的标签隐藏。但是这种方式有个问题，就是当图片无法显示时，将导致这个区域没有任何内容（用户体验不好）。同时，使用
display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

3、<h1>Image Replacement</h1> 

h1{

text-indent: -5000px;background:url(hello_world.gif) no-repeat;width: 150px;height:35px;

} 

代码非常简单，但是依然存在2的问题，图片不显示时，区域无内容
4、最完善的图文替换技术（最喜欢）：加入空标签<span></span>

<h1><span></span>Image Replacement</h1>

h1
{

width: 150px;height: 35px;position: relative; }

h1 span{

position:absolute;

width:100%;

height:100%;

background:
url(hello_world.gif) no-repeat

}

思路：将
H2 的 position 设为 relative ，这样将使 H1 里面的元素定位以 H1 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在
SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。
http://www.5icool.org/a/201306/a1899.html