2023年6月21日发(作者：)

CSS中的图像替换技术实现图像替换时可以像平常⼀样将⽂本添加到⽂档中，然后使⽤css隐藏⽂本并在它的位置上显⽰⼀个背景图像。这样，搜索引擎仍然可以搜索到HTML⽂本，⽽且如果禁⽤CSS，⽂本仍然会显⽰。但是⼀些⽐较流⾏的图像替换⽅法对屏幕阅读器是⽆效的，⽽且如果关闭图像但是打开CSS，就会出现内容缺失。最常⽤的图像替换技术Phark这是⼀种适合屏幕阅读器的图像替换技术，⽽不需要添加额外的⽆语义的div：

Hello World

Phark⽅法对标题进⾏⾮常⼤的负值⽂本缩进

123456h2{ text-indent:-5000px; background:url(....)no-repeat; width:150px; height:35px;}这种⽅法的缺点是在关闭图像打开CSS的情况下是⽆效的。这是⼀种很少见的情况，可能只有使⽤⾮常慢的连接或者使⽤⼿机作为调制解调器的⼈才会这样设置。站点访问者能够打开图像，但是他们可能选择不打开。要记住某些⼈可能看不见被替换的⽂本，所以对于重要信息或导航信息，最好避免使⽤这个⽅法。

FIR这个⽅法存在严重的可访问性问题123

Hello World

然后将图像作为背景图像应⽤于标题元素：12345h2{ background:url(...); width:150px; height:35px;}将span的display值设置为none,从⽽隐藏span的内容123span{ display:none;}这个⽅法的问题在于，许多流⾏的屏幕阅读器会忽略那些display的值为none或visibility为hidden的元素。因此会完全忽略这个⽂本，造成严重的可访问性问题。所以这种试图改进站点可访问性的技术实际上产⽣了相反的效果。因此，最好不要使⽤这种技术。 NIR(Nash Image Replacement)

利⽤伪元素和伪元素产⽣的内容来实现图像替换。1112

[Content]

.nir{ height:100px;//height of replacement image padding:0; margin:0; overflow:hidden;}.nir:before{ content:url(); display:block;

}这⾥的height的值与image的height相同，使⽤overflow:hidden使得图像在加载时h1标签中的不会显⽰出来。将伪元素的display设置为block,使得伪元素呈现为块级元素，将原来标签中的内容显⽰在伪元素内容的下⽅。IE6和IE7中的图像替换技术在IE6和IE7中不⽀持伪元素，所以NIR不适⽤，如果想要在IE6和IE7中实现图像替换技术，就得依赖于Phark method。这可以通过使⽤条件注释来实现。如下：1112改进NIRNIR中存在的第⼀个问题是：如果图像不可见，所有的浏览器会在元素内容的上⽅呈现很⼤的空⽩。Opera 10.5甚⾄会显⽰'image'这个⽂本。如果元素的⾼度⽐较⼩的话，元素上⽅的空⽩甚⾄会导致元素的内容部分或全部的溢出从⽽被隐藏。改进的NIR如下：{ height:100px;/*height of the replacement image*/ width:400px;/*width of replacement image*/ padding:0; margin:0; overflow:hidden;}.nir:before{ content:url(); display:inline-block; font-size:0; line-height:0;}将font-size和line-height设置为0避免了上⾯提到的产⽣的空⽩的问题。将元素的width设置为替换图像的width,以及将伪元素的display设置为inline-block使得在图像加载失败时产⽣的问题最⼩化.

2023年6月21日发(作者：)

CSS中的图像替换技术实现图像替换时可以像平常⼀样将⽂本添加到⽂档中，然后使⽤css隐藏⽂本并在它的位置上显⽰⼀个背景图像。这样，搜索引擎仍然可以搜索到HTML⽂本，⽽且如果禁⽤CSS，⽂本仍然会显⽰。但是⼀些⽐较流⾏的图像替换⽅法对屏幕阅读器是⽆效的，⽽且如果关闭图像但是打开CSS，就会出现内容缺失。最常⽤的图像替换技术Phark这是⼀种适合屏幕阅读器的图像替换技术，⽽不需要添加额外的⽆语义的div：

Hello World

Phark⽅法对标题进⾏⾮常⼤的负值⽂本缩进

123456h2{ text-indent:-5000px; background:url(....)no-repeat; width:150px; height:35px;}这种⽅法的缺点是在关闭图像打开CSS的情况下是⽆效的。这是⼀种很少见的情况，可能只有使⽤⾮常慢的连接或者使⽤⼿机作为调制解调器的⼈才会这样设置。站点访问者能够打开图像，但是他们可能选择不打开。要记住某些⼈可能看不见被替换的⽂本，所以对于重要信息或导航信息，最好避免使⽤这个⽅法。

FIR这个⽅法存在严重的可访问性问题123

Hello World

然后将图像作为背景图像应⽤于标题元素：12345h2{ background:url(...); width:150px; height:35px;}将span的display值设置为none,从⽽隐藏span的内容123span{ display:none;}这个⽅法的问题在于，许多流⾏的屏幕阅读器会忽略那些display的值为none或visibility为hidden的元素。因此会完全忽略这个⽂本，造成严重的可访问性问题。所以这种试图改进站点可访问性的技术实际上产⽣了相反的效果。因此，最好不要使⽤这种技术。 NIR(Nash Image Replacement)

利⽤伪元素和伪元素产⽣的内容来实现图像替换。1112

[Content]

.nir{ height:100px;//height of replacement image padding:0; margin:0; overflow:hidden;}.nir:before{ content:url(); display:block;

}这⾥的height的值与image的height相同，使⽤overflow:hidden使得图像在加载时h1标签中的不会显⽰出来。将伪元素的display设置为block,使得伪元素呈现为块级元素，将原来标签中的内容显⽰在伪元素内容的下⽅。IE6和IE7中的图像替换技术在IE6和IE7中不⽀持伪元素，所以NIR不适⽤，如果想要在IE6和IE7中实现图像替换技术，就得依赖于Phark method。这可以通过使⽤条件注释来实现。如下：1112改进NIRNIR中存在的第⼀个问题是：如果图像不可见，所有的浏览器会在元素内容的上⽅呈现很⼤的空⽩。Opera 10.5甚⾄会显⽰'image'这个⽂本。如果元素的⾼度⽐较⼩的话，元素上⽅的空⽩甚⾄会导致元素的内容部分或全部的溢出从⽽被隐藏。改进的NIR如下：{ height:100px;/*height of the replacement image*/ width:400px;/*width of replacement image*/ padding:0; margin:0; overflow:hidden;}.nir:before{ content:url(); display:inline-block; font-size:0; line-height:0;}将font-size和line-height设置为0避免了上⾯提到的产⽣的空⽩的问题。将元素的width设置为替换图像的width,以及将伪元素的display设置为inline-block使得在图像加载失败时产⽣的问题最⼩化.