<!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`和`overflow`属性是前端开发者用来隐藏文本的两种常见技巧。它们各自有其适用场景，理解它们的工作原理和限制，可以帮助我们更好地优化网页布局和提高页面性能。在处理不同类型的元素时，...
4. **响应式设计**：在响应式布局中，需要考虑不同屏幕尺寸下`text-indent`的值可能需要调整，以确保在所有设备上都能正确隐藏文字。 总结起来，`text-indent`属性在CSS中主要用来调整文本缩进，但在特定情况下，...
需要注意的是，虽然`text-indent`提供了隐藏文字的手段，但这种方法并不总是最佳实践。对于可访问性和SEO（搜索引擎优化）而言，链接的文字是非常重要的，因为它提供了关于链接目的地的线索。因此，如果可能，应优先...
以上只是CSS文字样式的一部分，实际中还有更多高级技巧和特性，如文本填充、文本溢出隐藏、文本选中样式等，它们都能帮助我们创建更具吸引力和易读性的网页界面。在实践中，合理运用这些样式可以显著提升网页的用户...
通过使用特定的标签（如），将text-indent属性设置为-9999px并指定背景图片，可以将元素中的文本隐藏。然而，在IE7中这会导致元素“没影”，通过在前后加入 可以间接解决这一问题。 7. **浏览器兼容性问题的...
`是一种组合技巧，可以有效地隐藏文字，同时兼容多种浏览器，包括IE6.0、7.0、8.0和Firefox 3.010。通过将`line-height`和`font-size`设为0，文字实际高度变为0，`overflow:hidden;`则隐藏超出容器的文字。然而，此...
- **重要性**：通过使用背景图片和`text-indent`属性，可以在不使用`<img>`标签的情况下实现文字效果。 - **示例代码**： ```css h1 { background: url(widget-image.gif) no-repeat; height: imageheight; ...
【CSS技巧详解】 1. **CSS字体属性简写规则**：在CSS中，可以将字体相关的属性合并到一行，如`font: bold italic small-caps 1em/1.5em verdana,sans-serif`。这包括字体粗细、斜体、小型大写字母、字体大小、行高...
然而，不同浏览器对CSS的解析和实现可能存在差异，尤其是老版本的Internet Explorer（如IE7）和其他浏览器，这可能导致隐藏文字时图片无法正常显示。 在标题和描述中提到的问题是，当使用CSS的`text-indent`属性将...
- **面向文档**：以文档结构为基础进行设计。 - **面向对象**：将页面看作是由多个对象组成的集合，每个对象都有自己的样式和行为。 #### Web标准的前景 随着互联网技术的发展，Web标准的重要性日益凸显。未来的...
### CSS文章列表滑动门混排、文字、滚动效果知识点解析 #### 一、滑动门技术概述 在网页设计中，“滑动门”技术是一种常见的布局技巧，主要用于创建复杂且具有动态效果的导航菜单或者按钮等元素。该技术的核心在于...
4. 文本缩进：`text-indent`，如 `text-indent: 2em;`。 5. 行间距：`line-height`，如 `line-height: 1.5;`。 四、CSS样式表 1. 行内样式表：在HTML元素的 `style` 属性中定义，如 `<div style="color: red;">...
标题中的“新的CSS图片替换的技巧(背景显示与文本移离屏)”指的是使用CSS样式来实现文本元素与图片的替换，以达到视觉效果。传统的图片替换方法常常使用`text-indent: -9999px`将文本移出屏幕，同时设置背景图片，...
CSS中的`filter`属性可以应用于图片或背景，以添加多种视觉效果。 - **Font**: 字体。CSS中的`font`属性用于设置文本的字体系列、大小、粗细等。 - **First**: 第一个。用于描述序列中的首个元素或项目。 - **For**:...
CSS滑动门技术是一种在网页设计中常用的技巧，主要用于创建具有视觉吸引力的导航菜单或按钮。这个技术利用了CSS的定位、伪类和背景图像属性，使得元素在鼠标悬停时能够显示不同的图像部分，从而实现类似滑动的效果。...
【CSS图片替换技巧】 为了兼顾SEO和特殊字体的需求，可以使用CSS背景图像替换文本。例如，原本使用`<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>`，可以通过以下CSS实现： ```css h1 { background: ...
- **缩进**：`text-indent`，设置首行缩进，单位通常是`px`。 - **垂直对齐**：`vertical-align`，控制行内元素的垂直对齐方式，如`baseline`(基线)，`sub`(下标)，`super`(上标)，`middle`(中间对齐)。 - **词间距*...
2. **图像替换技巧**：在CSS中，可以通过`text-indent`属性实现图像替换，当`text-indent`值为负数且足够大时，文本会被推至不可见区域，从而实现图像显示。选项中，`text-indent:-200px`和`text-indent:-2000px`...
使用CSS实现文字替换图片，以提高可读性和SEO效果。例如，若要将`<h1>`标题替换为图标，可以这样做： ```css h1 { background: url(widget-image.gif) no-repeat; height: image-height; /* 替换为实际图片高度 */...