CSS中的图像替换技术

末蓝、 2022-08-05 05:10 116阅读 0赞

实现图像替换时可以像平常一样将文本添加到文档中，然后使用css隐藏文本并在它的位置上显示一个背景图像。这样，搜索引擎仍然可以搜索到HTML文本，而且如果禁用CSS，文本仍然会显示。但是一些比较流行的图像替换方法对屏幕阅读器是无效的，而且如果关闭图像但是打开CSS，就会出现内容缺失。

### 最常用的图像替换技术 ###

## Phark ##

这是一种适合屏幕阅读器的图像替换技术，而不需要添加额外的无语义的div：

<h2>Hello World</h2>

Phark方法对标题进行非常大的负值文本缩进

h2{
    	text-indent:-5000px;
    	background:url(....)no-repeat;
    	width:150px;
    	height:35px;
    }

这种方法的缺点是在关闭图像打开CSS的情况下是无效的。这是一种很少见的情况，可能只有使用非常慢的连接或者使用手机作为调制解调器的人才会这样设置。站点访问者能够打开图像，但是他们可能选择不打开。要记住某些人可能看不见被替换的文本，所以对于重要信息或导航信息，最好避免使用这个方法。

## FIR ##

这个方法存在严重的可访问性问题

<h2>
    	<span>Hello World</span>
    </h2>

然后将图像作为背景图像应用于标题元素：

h2{
    	background:url(...);
    	width:150px;
    	height:35px;
    }

将span的display值设置为none,从而隐藏span的内容

span{
    	display:none;
    }

这个方法的问题在于，许多流行的屏幕阅读器会忽略那些display的值为none或visibility为hidden的元素。因此会完全忽略这个文本，造成严重的可访问性问题。所以这种试图改进站点可访问性的技术实际上产生了相反的效果。因此，最好不要使用这种技术。

## NIR(Nash Image Replacement)  ##

利用伪元素和伪元素产生的内容来实现图像替换。

<h1 class= "nir">[Content]</h1>
    .nir{
    	height:100px;//height of replacement image
    	padding:0;
    	margin:0;
    	overflow:hidden;
    }
    .nir:before{
    	content:url(image.gif);
    	display:block;
    	
    }

这里的height的值与image的height相同，使用overflow:hidden使得图像在加载时h1标签中的不会显示出来。将伪元素的display设置为block,使得伪元素呈现为块级元素，将原来标签中的内容显示在伪元素内容的下方。

## IE6和IE7中的图像替换技术 ##

在IE6和IE7中不支持伪元素，所以NIR不适用，如果想要在IE6和IE7中实现图像替换技术，就得依赖于Phark method。这可以通过使用条件注释来实现。如下：

## 改进NIR ##

NIR中存在的第一个问题是：如果图像不可见，所有的浏览器会在元素内容的上方呈现很大的空白。Opera 10.5甚至会显示'image'这个文本。如果元素的高度比较小的话，元素上方的空白甚至会导致元素的内容部分或全部的溢出从而被隐藏。  
  
改进的NIR如下：

.nir{
    	height:100px;/*height of the replacement image*/
    	width:400px;/*width of replacement image*/
    	padding:0;
    	margin:0;
    	overflow:hidden;
    }
    .nir:before{
    	content:url(image.gif);
    	display:inline-block;
    	font-size:0;
    	line-height:0;
    }

将font-size和line-height设置为0避免了上面提到的产生的空白的问题。将元素的width设置为替换图像的width,以及将伪元素的display设置为inline-block使得在图像加载失败时产生的问题最小化.

参考文章 http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/