文本替换

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替换

posted @ 2016-12-01 09:36  党兴明  阅读(192)  评论(0)  编辑  收藏  举报