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);
}

手赚鸭会员

打赏 收藏 海报 链接