CSS中的几种图片覆盖文本的方法

CSS CookBook中有几种图片覆盖文本的方法，整理出来备用：

1 Gilder/Levin image replacement technique:

<h1>   <span></span>   Replacement Text Is Here. </h1>

h1 {   width:200px;   height:100px;   position:relative; } h1 span {   background: url(replacement.png) no-repeat;   position: absolute;   width:100%;   height:100%; }

这个方法借用的CSS中的relative定位的父元素内容会被absolute定位的子元素内容所覆盖，借用绝对定位子元素的背景图片来进行覆盖。

2 Fahrner image replacement method:

这个方法使用一个没有语义的span元素来包含需要覆盖的元素，并且将span元素的display属性设置为none。
这个方法的缺点在于，如果用户采用屏幕阅读器来读这个覆盖文本，那么被覆盖的本文会被跳过，因为这个span元素被隐藏了。

<h1>     <span>     Replacement Text Is Here.     </span> </h1>

h1 {     background: url(replacement.png) no-repeat;     width: 200px;     height: 100px; } h1 span {     display: none; }

3 Phark image replacement method

之前两种方法都使用了一个没有语义的span标签来实现图片对文本的覆盖，这个方法并没有使用这个标签。
这个方法也存在一个问题，如果访问者关闭了浏览器的图片加载，那么图片下面的文本就不会显示了，因为这些文字会被text-intent不知道搞到哪里去了。但是这个方法会在屏幕阅读器中有很好的表现。

<h1>     Replacement Text Is Here. </h1>

h1 {     text-intent: -9000em;     background: url(repalcement.png) no-repeat;     width: 200px;     height: 100px; }

4 CSS3 approach to image replacement

CSS3专门提供的一种简单的方法进行图片覆盖文本，当然这要要求浏览器支持CSS3。
这个方法最好的地方是：我们不仅仅可以使用图片来覆盖文本，也可以使用小视频来覆盖文本。

<h1>     Replacement Text Is Here. </h1>

h1 {     content: url(replacement.png); }