《HTML 5与CSS 3权威指南（第3版·下册）》——20.2 插入图像文件

20.2 插入图像文件

20.2.1 在标题前插入图像文件

使用before选择器或after选择器，除了可以在元素的前面或后面插入文字之外，还可以插入图像文件。插入图像时，需要使用url属性值来指定图像文件的路径。在如下所示的代码中，在h2标题元素前插入了mark.png图像文件。

目前Firefox、Chrome、Safari、Opera浏览器都支持这种插入图像文件的功能，在IE8中只支持插入文字的功能，不支持插入图像文件的功能。

另外，在CSS 3的定义中还可以通过url属性来插入音频文件、视频文件等其他格式的文件，但目前还没有得到任何浏览器的支持。

20.2.2 插入图像文件的好处

虽然可以利用img元素在画面中追加图像文件，但是也可以使用样式表来追加图像文件，这样做的好处是可以为页面的编写节省大量时间。

例如，在代码清单20-3所示的示例中，可以利用名字为“new”的类来在个别标题后面追加表示新内容的图像文件，这个功能可以被利用在购物网站的商品清单中，用来表示哪些货物是新到的，或者用在文章网站的文章列表中，用来表示哪些文章是新发表的。

这段代码的运行结果如图20-3所示。

另外，还有一种在样式表中追加图像文件的方法，就是把它作为元素的背景图像文件来追加。例如代码清单20-4的示例中，同时对两个标题元素追加图像文件，对第一个标题元素采用before选择器，对第二个标题元素采用追加背景图像的方法来追加。在浏览器中显示的时候，这两种追加的结果看不出有什么区别。

这段代码的运行结果如图20-4所示。

但是，在打印的时候，如果设定为不打印背景的话，使用before选择器追加的图像文件能够正常打印，但是使用追加背景图像的方法追加的图像文件就不能正常打印了。

譬如，在Firefox浏览器中运行代码清单20-4中的示例代码，然后点击“文件”菜单下的“打印预览”子菜单，在弹出的打印预览对话框中，点击页面设置按钮，在弹出的页面设置对话框中将“打印背景（颜色和图片）”复选框设为非选取状态，然后关闭页面设置对话框，观察打印预览对话框中的画面，画面变为如图20-5所示。

20.2.3 将alt属性的值作为图像的标题来显示

如果在content属性中通过“attr(属性名)”这种形式来指定attr属性值，可以将某个属性的属性值显示出来。在代码清单20-5中，给出一个attr属性值的使用示例。在该示例中，在页面上用img元素显示一个图像文件，并且在该元素中指定alt属性的属性值，alt属性的作用是用来指定当图像不能正常显示时所显示的替代文字。

在图像文件后面显示图像文件的标题，在样式中将attr属性值设定为img元素的alt属性值，这样图像文件的标题文字就是alt属性中指定的文字了。到目前为止，只有Opera 10浏览器对这个attr属性值提供支持。

这段代码在Opera 10浏览器中的运行结果如图20-6所示。