文本替换
HTML文本的优点很多,搜索引擎可以找到,可以复制黏贴,改变字号可以改变大小,但是网页设计人员能用的样式字体有限,对于某些效果不能实现时,还是需要使用图像。
由于不愿意直接将图片嵌入页面,由此有了图像替换,可以像平常那样将文本添加到文档,然后使用css隐藏文本并在他的位置上显示背景图像。
局限性:对于屏幕阅读器无效(将页面转化成声音等),而且如果关闭图像但是打开css,会出现内容缺失。所以只在特定情况下用合适,比如公司品牌等。
FIR:最早最流行的图像替换技术,但是存在严重可访问性问题
<style> h2{ background: url() no-repeat; width: px; height: px; } span{ display: none; /*通过display将文字隐藏*/ } </style> </head> <body> <!--把要替换的文字放进span中,然后将替换图像作为背景图像应用于标题--> <h2> <span>Hello World</span> </h2> </body>
Phark:适合屏幕阅读器,且不需要添加额外无语意的标签。但在关闭图像打开css时是无效的
<style> h2{ background: url() no-repeat; width: px; height: px; text-indent: -22222px;//使用非常大的负值文本缩进来隐藏文字 } </style> </head> <body> <h2> Hello World </h2> </body>
sIFR:可伸缩flash替换
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。