首页 >> SEO优化, 网站技术 >> CSS图片替换文字小技巧

CSS图片替换文字小技巧

Catagory:SEO优化, 网站技术, Date:2010年11月16日,Author: 工业品营销-贾定强

今天做网站时碰到一个问题,一个PS设计好的导航字体在html中没有,但设计人员又不想换字体,而SEO人员又不希望用图片做导航,因为图片导航对搜索引擎不友好。类似的问题应该在做网站的时候经常会遇到。解决方法就是用css实现图片替换文字,同时又不失去文字:

<style type=”text/css”>
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>

<h2>
<span></span>Hello World
</h2>

思路是:首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位, 撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图 无法显示,将显示下层的文字内容,不影响正常使用。

但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。 language translated in spanishнастенно потолочный светильник

来源:工业品营销,原文地址:http://www.jiadingqiang.com/1673.html,欢迎分享本文,转载请保留出处!

你也来说几句:

名字*必填
邮箱*必填,不会被公开
网站
QQ群交流
最近文章
文章归档
  • 2017 (16)
  • 2016 (31)
  • 2015 (63)
  • 2014 (21)
  • 2013 (38)
  • 2012 (25)
  • 2011 (67)
  • 2010 (268)
  • 2009 (19)