打开电脑,感觉没有什么事可做,就随便拿起《css mastery》翻了下,刚好看倒图像替换这块,突然想起前些天曾有一网友问过该问题,就想总结出来,以便自己和网友今后参考。
正式进入使用方法总结之前,我们需要先理清几个概念,1.二者的区别:隐藏文字是要把你不需要显示的文字隐藏掉,可能因为它妨碍美观或暂时不需要显
示,也就表明此时文字的视觉可视性和物理空间存在性都没有;而图象替换就是用设计好的图片以背景的方式取代文字,目的是为了使用户有更好的视觉享受,因为
设计人员对文字只有有限的选择能力,但如果不写文字而直接使用背景图象又对搜索引擎不大友好,故而发明了图象替换。可能这会有些朋友有这样的疑问:为什么
不直接用<img
/>标签呢?这就涉及到标准中的分离了,在标准中只有数据才应该直接写到Xhtml中,很显然这儿的图片只能算作表现,因此,图象替换中文字虽然是
不可见的,但它的物理空间仍然存在。2.什么时候该用图象替换?由于图象替换技术在关闭图象且打开CSS的情况下将出现内容空白,所以应当尽可能避免使用
它,当然如果文字需要使用特定字体,且不是很重要的信息时可以考虑使用。我特别想提及的是logo到底该不该应用图象替换?我认为logo(既非
banner也非标题)是应当作为数据出现的,因为它是一个站点的标志。好了,言归正传,开始列举常用方法。
先说CSS隐藏文字的几种常用方法,并顺便解释下各自的优缺点:
1.display:none:它可以使包括容器本身在内的东西都消失,简便且有效,但它有两个耳熟能详的缺陷,那就是对搜索引擎不友好,且被屏幕阅读器所忽略。
2.text-indent:-9999px:text-indent是首行缩进,所以对于多行文本,若单独使用它就有明显的不足,需加上
white-space:nowrap;来弥补不足,但还有一个问题:物理空间仍然存在,故还需设置line-height:0;或使用超小字体(在IE
下有点BUG),最终代码如下:
代码:
以下为引用的内容:
.texthidden{
text-indent:-9999px;
white-space:nowrap;
line-height:0;}
3.overflow:hidden:这是一个比较合理且我最喜欢的方法,具体代码如下:
代码:
以下为引用的内容:
.texthidden{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:0;
height:0;}
附加:positon:absolute:
用绝对定位将其推出可视区,不过虽然可视性不存在,但仍占据物理空间,与隐藏文字的宗旨相背,代码请看:
代码:
以下为引用的内容:
.texthidden{
positon:absolute;
margin-top:-9999px;
margin-left:-9999px;}
下来列举图象替换的流行技术,希望可以帮助你更好地掌握它们并了解各自的局限性:
1.display:none:此处使用该方法时,需要多添加一层额外的无语义的结构(此处用了span)来应用display:none;,
即<h1><span>标题/span></h1>,再加上上述的缺陷,所以最好不使用该技术。
2.text-indent:-9999px:隐藏文字中已经都说了,只需在代码中去除line-height:0;,再添加
background:url();即可,但text-indent:-9999px;在不同的浏览器存在差异,比如在IE5下就常会出现背景显示不出来
或是滞后问题,不过总的来说,在图象替换方面它还是一个不错的方法。
3.overflow:hidden:这依旧是一个我最喜欢的方法,但合不合理却不敢妄言,具体代码如下:
代码:
以下为引用的内容:
.replacement{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:300px;
height:100px;
padding:100px 0 0;
background:url();}
若需要替换一个带链接的文字(即a出现在文字标签中),则需要对代码稍做些改动,具体代码如下:
代码:
以下为引用的内容:
.replacement,.replacement a{
display:block;/*统一转化为块级元素*/
overflow:hidden;
width:300px;
height:100px;}
.replacement a{
padding:100px 0 0;
background:url();}
对于该代码需要注意的是,必须在父级标签中加一个overflow:hidden;,因为在IE下会出现一个小bug:a的内容没办法溢出隐藏。
附加:positon:absolute:以上三种替换方法都有一个共同的缺陷,那就是:如果浏览器禁止显示图片且打开CSS或者用阅读器之类的话
会造成用户无法接受信息。为了解决这一问题,在《css
mastery》一书中,给我们提出了这样一种方法:将一个图象覆盖在文字上而非隐藏文本,代码请看:
代码:
以下为引用的内容:
<style type="text/css">
h2{
positon:relative;
width:300px;
height:100px;}
h2 span{
positon:absolute;
width:100%;
height:100%;
background:url();}
</style>
<h2>
<span></span>晋西浪子
</h2>
当然它也有缺陷,比如,添加了一层额外的无语义的结构(比display:none内的更加没有意义),还有它必须使用具有实色背景的图象。
分享到:
相关推荐
css 隐藏多余的文字,许多网站开发的时候,都带有新闻动态模块,或者其他信息模块,有时候显示出的列表,不需要显示出所有信息,就用css 控制一下就Ok 了
css3文字特效_css3火焰文字_css3文字渐变代码
网页抓取软件Flash css 文字图片 网页抓取软件Flash css 文字图片 网页抓取软件Flash css 文字图片 网页抓取软件Flash css 文字图片 网页抓取软件Flash css 文字图片 网页抓取软件Flash css 文字图片 网页抓取软件...
css3翻转文字css3翻转文字css3翻转文字css3翻转文字css3翻转文字
强大的CSS3,可以制作效果非常棒的文字效果。
jquery css3文字动画特效点击切换文字动态效果
CSS设置选中网页文字时的背景和颜色,内容包含默认样式、设置样式,具体可见文档内CSS样式设置。
css控制字母、数字文字自动换行方法css控制文字自动换行css控制文字自动换行
CSS实现超级炫酷的流光按钮效果 在网页中实现文字的一个一个出现
javascript与css实现文字闪烁 javascript与css实现文字闪烁
CSS文字组成肖像插图网页特效.rar
十几个酷炫的HTML5 CSS3文字特效 源代码.zip 文字阴影效果 阴影角度可随鼠标变化 五彩文字特效 文字带阴影效果 3D阴影文字特效 字母文字颗粒动画 可设置重力感应 3D文字特效 文字立体可旋转 3D文字特效 文字外翻效果...
代码简介:CSS3文字特效艺术文字样式代码是一款超炫的CSS3文字特效集锦特效代码。
CSS3实现各种网页上文字及图片的立体显示特效,立体文字,立体图片,和阴影图片特效,实际上就是添加不同的阴影以及拉伸图片形成的效果,用CSS3实现起来比传统CSS更简单,代码更少。压缩包内一共有9款这种文字和图片...
这是一款使用纯css3制作的文字颜色渐变和文字阴影特效插件。通过该插件可以制作各种文字颜色渐变效果和文字阴影效果,它的文字阴影就像PS中的浮雕切边文字效果一样,非常好看。
html+js+css图片轮播图下方配文字可变图片可点击
是初学阶段学员的良好教程, 相信看后受益匪浅! 里面详细讲解了各种图像与文字的混合排版方式。
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果。