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

17.2.2　插入图像文件的好处

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

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

代码清单17-3　使用选择器插入图像文件的示例

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

图17-3　使用选择器插入图像文件的示例

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

代码清单17-4　同时采用两种方法追加图像文件的示例

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

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

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

      图17-4　同时采用两种方法追加图像文件示例   图17-5　将打印时的页面设置修改为不打印背景