十种图片替换文本CSS方法

作者：大漠 日期：2011-11-21 点击：4380
trick
图片替换文字

很多网站的logo都使用图片替换文本来实现，而且在一些情况下也有使用图片效果来替换难以实现的文本效果。这些制作我想大家在平时制作中都或多或少的碰到过，那么今天我老话重谈，整理了十种图片替换文本的制作方法。希望对大家有所帮助。

制作原理：

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点，优点就是能实现一些特殊的页面效果，缺点就是需要加载图片，而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处，另外据说会对搜索引擎的搜索有影响，对于这一点没有考究过。那么我们也不去控寻这方面的问题，我们一起来看今天所要说的图片替换文本的制作方法。

方法一：

HTML Markup

			
<h1 id="technique-one">
  <a href="#">w3cplus</a>
</h1>

CSS Code:

#technique-one {
  width: 329px;
  height: 79px;
  background-image: url(images/w3cplus-logo.png);
}
#technique-one a {
  display: none;
}

这种方法被称为“FIR”方法， Joe Clark在《Facts and Opinion About Fahrner Image Replacement》一文中有做深入的介绍。使用这种方法需要注意两点：

  1. 结构性需要增加一个标签包裹文本；如上面的HTML Markup所示；
  2. 需要把背景图设置在外标签上，并且将文本外标签隐藏。

这种方法有一个不好的地方就是不利于阅读器浏览网页。

方法二：

HTML Markup

<h1 class="technique-two">w3cplus</h1>

CSS Code

.technique-two {
  width: 2329px;
  height: 79px;
  background: url(images/w3cplus-logo.png) no-repeat top right;
  margin: 0 0 0 -2000px;
}

这种方法是Radu Darvas创建的，使用负margin配合宽度来制作。如果运用在简单之处，此方法可行，但对于复杂的布局中，大家还需慎用。因为其有可能会影响你的页面布局。

方法三：

HTML Markup

<h1 class="technique-three">w3cplus</h1>

CSS Code

.technique-three {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

这种方法是由Mike Rundle创建，并且简称为Phark方法，也是目前使用图片替换文本常和的方法。这种方法简单易懂而且支持阅读器之类浏览网页。其关键之处使用“text-indent属性，并且给其设置一个较大的负值，达到隐藏文本的效果，”如果你想了解的更深可以参考一下Malarkey Image Replacement (MIR)。

方法四：

HTML Markup

<h1 class="technique-four">
  <a href="#">
   <img src="images/w3cplus-logo.png" alt="w3cplus" />
 </a>
</h1>

CSS Code

.technique-four {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  text-indent: -9999px;
}

这种方法，我不知道来自源于何处，也不知道其有什么优势之处，可以说他和方法三没有多大的区别，只是上面的替换的是文本，下面是替换的图片而以。这样使用我至今没有整明白是为什么?不知道是不是和SEO方面有关系。无从考究，先放上来给大家参考一下。

方法五：

HTML Markup

<h1 class="technique-five">
  <img src="images/blank.gif" alt="w3cplus" /<
  <span>w3cplus</span>
</h1>

CSS Code

.technique-five {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-five span {
  display: none;
}

这种方法有一个特别之处我们此处使用一个透明的gif图片，通过在img标签中的“alt”属性来弥补display:none。这样阅读器之类的就能阅读到所替换的文本是什么。

方法六：

HTML Markup

<h1 class="technique-six">w3cplus</h1>

CSS Code

.technique-six {
  width: 329px;
  padding: 79px 0 0 0;
  height: 0px;
  font-size: 0;
  background: url(images/w3cplus-logo.png);
  overflow: hidden;
}

这种方法是由Seamus Leahy和Stuart Langridge发明。使用零高度来隐藏文本，但为了显示背景图片，需要设置一个与替换图片一样的大小的padding值。

方法七：

HTML Markup

<h1 class="technique-seven">
    <span>w3cplus</span>
</h1>

CSS Code

.technique-seven {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
.technique-seven span {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
}

Leon Dwyer想出的这种方法，通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果。真是好方法。

方法八：

HTML Markup

<h1 class="technique-eight">
  <span></span>w3cplus
</h1>

CSS Code

.technique-eight {
  width: 329px;
  height: 79px;
  position: relative;
}
.technique-eight span {
  background: url(images/w3cplus-logo.png);
  position: absolute;
  width: 100%;
  height: 100%;
}

Levin Alexander。这种方法在利用一个空白的span标签来放置背景图片，并对其进行绝对定位，使用覆盖文本，达到隐藏替换文本的效果。

方法九：

HTML Markup

<h1 class="technique-nine">w3cplus</h1>

CSS Code

.technique-nine {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
  font-size: 1px;
  color: white;
}

Levin Alexander写的这种方法很独特，设置字体为微小值，但这里需要注意一点不能忘了设置字体色和替换图片色一样，不然会有一个小点显示出来。

方法十：

HTML Markup

<h1 class="technique-ten"><span>w3cplus</span></h1>

CSS Code

.technique-ten {
  width: 329px;
  height: 79px;
  background: url(images/w3cplus-logo.png);
}
			
.technique-ten span {
  border: 0 !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px,1px,1px,1px);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  width: 1px;
}

Jonathan Snook使用css的clip属性来实现图片替换文本的效果，详细可以参考Hiding Content for Accessibility。

上面主要搜集了十种图片替换文本的CSS制作方法，希望对大家有所帮助。具体采用哪一种方法来运用到你的项目中，你可以根据你自己的需求来选择。最后大家可以看看在线的效果。如果你还有其他的实现方法，可以直接在评论中留下你的方法。

2012年11月22日更新

方法十一

以前是通过text-indent的负值来隐藏文本，但其实还有一种类似的方法：

.hidden-text {
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
}

2013年08月07日更新

方法十二

今天在整理SASS的Mixin时，打算写一个图片替代文本的效果，让我意外发现一种新的图片替代文本方法，特意动手一试，还真心不错：

<a class="ir" id="logo" href="http://www.w3cplus.com">W3cplus</a>

上面的结构，大家都清楚，就是一个logo的居住地，接下来，我们来看实现代码

#logo {
  background-image: url(http://www.w3cplus.com/sites/all/themes/w3cplusResponsive/logo.png);
  width: 125px;
  height: 115px;
  display: block;
  /*下面是关键代码*/
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}
#logo:before {
 content: "";
 display: block;
 width: 0;
 height: 150%;
}

其中把起这个功能作用的代码抽出来，并定义为`ir`

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

最终效果，可以猛击：DEMO

如需转载烦请注明出处：W3CPLUS

返回顶部