<!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>
以图换字是CSS布局中非常常用的一种手段，因为图片文字有时候比可选的文字的表达效果更好！
因此，某些文字标题是用图片来表达的。但写一个img标签实在不雅，为了照顾蜘蛛，我们使用浏览器障眼法。
于是用最常用的text-indent：
css:
Example Source Code [www.mb5u.com]
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 [www.mb5u.com]
<h4><a href="#">css网页布局w3c标准</a></h4>
但你会发现，在IE6中，没有得到期望的效果，背景图片和文字都被隐藏了（IE7也是这样，其它的未做测试）。
解决办法至少有两个：
Example Source Code [www.mb5u.com]
1： 将display:inline-block;改为display:block;
2：去掉display:inline-block;属性，加float:left;属性。
最终结果：
分享到：
相关推荐
链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。 因为平时是用overflow:hidden; 属性的，...
pnpm install --save-dev tailwindcss-text-indent # Install using npm npm install --save-dev tailwindcss-text-indent # Install using yarn yarn add -D tailwindcss-text-indent 用法 // tailwind.config.js {...
上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色： 尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。 对于:nth-child选择器，在简单白话文中，意味着选择一...
}后发现并没有起作用，这是因为text-indent只能给块级元素设置，但是如果让span{display:block}时，就会换行，还得通过浮动来控制，增加了麻烦，所以改css为span.t-i{text-indent:-999px;display:inline-block;}
CSS的世界真是一个神奇的世界。可能众多前端开发者听说过 :focus 并未听说过 :focus-within 。那么 :focus-within 是什么鬼。这篇文章，我们就说说 :focus-within 这个东东。 :focus-within是什么 在CSS中 :focus-...
HTML5 CSS3 text-shadow 文字阴影立体特效，prefixfree.min.js插件和jquery配合实现的文字特效，使用时只需定义需要显示阴影的文字即可，页面打开后会自动生成阴影文字，测试时请使用支持HTML5内核的浏览器。
在过去，想要对某部分文字进行强调，通常的做法是加粗，或者使用一个高亮的颜色，现在有了新的选择，就是使用 text-emphasis 属性进行强调装饰。 text-emphasis 家族总共有4个CSS属性，分别是： text-emphasis ...
CSS3设置文字阴影效果，对文字字体设置阴影效果，采用text-shadow样式，本来在CSS2版本中也有此属性，但在CSS3中文字阴影text-shadow再次被应用，丰富文字排版布局美化效果。 CSS3单词与语法 CSS3单词： text-shadow...
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ...style type=text/css> .tf{ width:
CSS 练习工厂常用的样式 - 回归基础多行省略.text { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}img 图片设定高宽后模糊img { width...
格式：text-indent: 2em; em:文字宽度 4.文字颜色 格式：color:; 取值： 1.英文单词 2.rgb(三个值分别代表：红，绿，蓝，范围0-255) 3,rgba(多了一个透明度属性,0-1) 4.十六进制 #FFEE00 FF代表R，EE代表G...
利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果，因此可以替换掉之前使用过的一些繁琐的图片。到目前为止Safari、FireFox、Chrome和Opera等主流浏览器都支持该功能。 二、介绍CSS3的 text-shadow属性...
css3-text-bubble-tips.zip
text-shadow 给文字设置阴影的属性 text-shadow: 1px 2px 3px red; 1px表示X轴偏移量（取值范围负数~正数，负数阴影在左，正数阴影在右），2px表示Y轴偏移量，3px表示模糊度(数值越大越模糊，该数值不能为负值) ...
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
利用CSS3新增的text-shadow属性可以生成文本阴影，在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果，大大提高开发效率，无需链接图片文件，节约带宽。
方式一：text-indent:-9999px不多说，ext-indent负值为最常用方法，然问题有三：1.较大的负值有性能问题，例如新浪/腾讯微博提交按钮的-9999em，大概12~16万像素的宽度，相对于100个显示器宽度，在低配Android pad上...