合理隐藏文字

2009年12月25日 | HTML/CSS

一般我们显示艺术性文字是使用图片替换文字的方法
绝大部分网站都是使用直接隐藏掉文字的方式：

<style>
.logo{
	display:block;
	height:31px;
	width:30px;
 
	text-indent:-999px;
	background:#464646 url(http://www.vfresh.org/wp-admin/images/wp-logo.gif) no-repeat;
}
</style>
<a href="#" class="logo">vfresh.org</a>

这样，我们成功的隐藏了文字，并且在css未能加载时能正常显示文字。

但是在成功加载css后，如未能成功加载图片或者图片加载得很慢，这个部分都会显示一片空白。
whatisthis

为了避免这个问题，我们可以使用一个空白标签（如）浮动于文字上层并填充图片
同时我们可以对文字层格式化，使之接近于图片的显示效果。
这样在图片没有显示出来之前，都由文字这个强力后备顶着！~

<style>
.christmas {
	position:relative;
	width:304px;
	height:149px;
	line-height:25px;
	background:#1E3151;
	color:#CCE8F3;
	font-size:14px;
}
.christmas span {
	position:absolute;
	top:0;
	left:0;
	display:block;
	height:100%;
	width:100%;
	background:url(http://www.vfresh.org/wp-content/uploads/2009/12/bestwish.jpg) no-repeat;
}
</style>
<div class="christmas">
	Best Wishes for Christmas & the New Year!
	<span></span>
</div>

但这样做的缺点是：
1.需要一个填充图片的标签，需要更多的选择器来进行样式控制。
2.图片加载完成时替换掉文字的视野时，会有所突尤。

但为了让用户更快的预览到信息，这点缺点，在必要的时候确是大可忽略的，特别是游戏站点。

合理隐藏文字

相关阅读

2 条留言

分类

热门文章

IT技术圈

学习资料

工具

链接

管理登录