20.2.3 将alt属性的值作为图像的标题来显示
如果在content属性中通过"attr（属性名）"这种形式来指定attr属性值，可以将某个属性的属性值显示出来。在代码清单20-5中，给出一个attr属性值的使用示例。在该示例中，在页面上用img元素显示一个图像文件，并且在该元素中指定alt属性的属性值，alt属性的作用是用来指定当图像不能正常显示时所显示的替代文字。在图像文件后面显示图像文件的标题，在样式中将attr属性值设定为img元素的alt属性值，这样图像文件的标题文字就是alt属性中指定的文字了。到目前为止，只有Opera 10浏览器对这个attr属性值提供支持。
代码清单20-5 attr属性值的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>attr属性值的使用示例</title>
</head>
<style type="text/css">
img:after{
content:attr（alt）；
display:block;
text-align:center;
margin-top:5px;
}
</style>
<body>
<p><img src="sky.jpg" alt="蓝天白云"/></p>
</body>
</html>
这段代码在Opera 10浏览器中的运行结果如图20-6所示。
图20-6 attr属性值的使用示例
相关HTML 5与CSS 3权威指南：将alt属性的值作为图像的标题来显示