CQ-CSER

计算机爱好者

text-indent隐藏文字(以图换字)

Posted on | 十二月 7, 2009 | No Comments

以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
　　因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
　　于是用最常用的text-indent：

css:

 Example Source Code
h4 a{background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}

Xhtml:

 Example Source Code
<h4><a href=”#”>css网页布局w3c标准</a></h4>

　　但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
　　解决办法至少有两个：

 Example Source Code
1： 将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。

最终结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS实例：text-indent隐藏文字（以图换字） - mb5u.com</title>
<style type="text/css">
h4 a{display:block; background:url(http://www.w3cbbs.com/images/w3cbbs/logow3cbbs.png) left top no-repeat;width:300px;height:75px;text-indent:300px; white-space:nowrap; overflow:hidden;}
</style>

</head>

<body>
<h4><a href=”http://www.w3cbbs.com/”>css网页布局w3c标准</a></h4>
</body>
</html>

相关文章:

  1. CSS隐藏文字的方法
  2. 三列自适应等高且中列宽度自适应
  3. css-float
  4. 仿迅雷博客用户登陆弹出窗口
  5. Ajax文本框输入提示
Category: WEB, css
Tags: >

评论|Comments

留言|Leave a Reply





  • Archives

  • SUNSHINE

    • About

    本博客采用创作共用版权协议,要求署名、非商业用途和保持一致. 转载本博客内容也遵循“署名-非商业用途-保持一致”的创作共用协议.

    订阅

    Search

    Admin