深层次剖析网页页面CSS掩藏文本和以图换字技术

2021-03-15 21:00 jianzhan

开启电脑上,觉得沒有甚么事可做,就随意拿起《css mastery》翻了下,恰好看倒图象更换这块,忽然想起前些天曾有1网友问过该难题,就想总结出来,便于自身和网友将来参照。
宣布进到应用方式总结以前,大家必须先理清几个定义,1.2者的差别:掩藏文本是要把你不必须显示信息的文本掩藏掉,将会由于它防碍美观大方或临时不必须显示信息,也就说明此时文本的视觉效果可视性性和物理学室内空间存在性都沒有;而图像更换便是用设计方案好的照片以情况的方法替代文本,目地是以便应用户有更好的视觉效果享有,由于设计方案人员对文本仅有比较有限的挑选工作能力,但假如不写文本而立即应用情况图像又对检索模块不大友善,故而创造发明了图像更换。将会这会一些盆友有这样的疑惑:为何不立即用<img />标识呢?这就涉及到到规范中的分离出来了,在规范中仅有数据信息才应当立即写到Xhtml中,很明显这儿的照片只能算作主要表现,因而,图像更换汉语字尽管是不能见的,但它的物理学室内空间依然存在。2.何时该用图像更换?因为图像更换技术性在关掉图像且开启CSS的状况下将出現內容空白,因此理应尽量防止应用它,自然假如文本必须应用特殊字体样式,且并不是很关键的信息内容时能够考虑到应用。我非常想提及的是logo究竟该不应该运用图像更换?我觉得logo(既非banner也非题目)是理应做为数据信息出現的,由于它是1个站点的标示。好了,言归正传,刚开始例举常见方式。
先说CSS掩藏文本的几种常见方式,并顺带解释下各有的优缺陷:
1.display:none:它可使包含器皿自身在内的物品都消退,简单且合理,但它有两个耳熟能详的缺点,那便是对检索模块不友善,且被显示屏阅读文章器所忽视。
2.text-indent:⑼999px:text-indent是首行缩进,因此针对多写作本,若独立应用它就有显著的不够,需再加white-space:nowrap;来填补不够,但也有1个难题:物理学室内空间依然存在,故还需设定line-height:0;或应用超小字体样式(在IE下有点BUG),最后编码以下:
编码:
下列为引入的內容:
.texthidden{
text-indent:⑼999px;
white-space:nowrap;
line-height:0;}
3.overflow:hidden:这是1个较为有效且我最喜爱的方式,实际编码以下:
编码:
下列为引入的內容:
.texthidden{
display:block;/*统1转换为块级元素*/
overflow:hidden;
width:0;
height:0;}
额外:positon:absolute:
用肯定精准定位将其推出可视性区,但是尽管可视性性不存在,但仍占有物理学室内空间,与掩藏文本的服务宗旨相背,编码请看:
编码:
下列为引入的內容:
.texthidden{
positon:absolute;
margin-top:⑼999px;
margin-left:⑼999px;}
下来例举图像更换的时兴技术性,期待能够协助你更好地把握它们并掌握各有的局限性:
1.display:none:此处应用该方式时,必须多加上1层附加的无词义的构造(此处用了span)来运用display:none;,即<h1><span>题目/span></h1>,再再加上述的缺点,因此最好是不应用该技术性。
2.text-indent:⑼999px:掩藏文本中早已都说了,只需在编码中除去line-height:0;,再加上background:url();便可,但text-indent:⑼999px;在不一样的访问器存在差别,例如在IE5下就常会出現情况显示信息不出来或是滞后难题,但是总的来讲,在图像更换层面它還是1个非常好的方式。
3.overflow:hidden:这依然是1个我最喜爱的方式,但合不符合理却害怕妄语,实际编码以下:
编码:
下列为引入的內容:
.replacement{
display:block;/*统1转换为块级元素*/
overflow:hidden;
width:300px;
height:100px;
padding:100px 0 0;
background:url();}
若必须更换1个带连接的文本(即a出現在文本标识中),则必须对编码稍做些修改,实际编码以下:
编码:
下列为引入的內容:
.replacement,.replacement a{
display:block;/*统1转换为块级元素*/
overflow:hidden;
width:300px;
height:100px;}
.replacement a{
padding:100px 0 0;
background:url();}
针对该编码必须留意的是,务必在父级标识中加1个overflow:hidden;,由于在IE下会出現1个小bug:a的內容没法外溢掩藏。
额外:positon:absolute:以上3种更换方式都有1个相互的缺点,那便是:假如访问器严禁显示信息照片且开启CSS或用阅读文章器之类的话会导致客户没法接纳信息内容。以便处理这1难题,在《css mastery》1书中,给大家提出了这样1种方式:将1个图像遮盖在文本上而非掩藏文字,编码请看:
编码:
下列为引入的內容:
<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>
自然它也是有缺点,例如,加上了1层附加的无词义的构造(比display:none内的更为沒有实际意义),也有它务必应用具备实色情况的图像。