CSS图片替换文字小技巧

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

今天做网站时碰到一个问题,一个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 里面的背景图 无法显示,将显示下层的文字内容,不影响正常使用。

但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。

1. 海外社媒客户开发工具【免费】了,帮你从GG/FB/Ins/谷歌地图上免费获取客户

2. WhatsApp 聊天记录保险【99元/年】,聊天记录不怕丢。自带翻译、多开,号码抓取、群发

3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用,【联系我】

微信扫一扫 或 点击链接联系我

仍有疑问,点击 链接,加个 微信 好友,一起交流。

发表评论