20.2.2 插入图像文件的好处
虽然可以利用img元素在画面中追加图像文件，但是也可以使用样式表来追加图像文件，这样做的好处是可以为页面的编写节省大量时间。
例如，在代码清单20-3所示的示例中，可以利用名字为"new"的类来在个别标题后面追加表示新内容的图像文件，这个功能可以被利用在购物网站的商品清单中，用来表示哪些货物是新到的，或者用在文章网站的文章列表中，用来表示哪些文章是新发表的。
代码清单20-3 使用选择器插入图像文件的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用选择器插入图像文件示例</title>
</head>
<style type="text/css">
h1.new:after{
content:url（new.gif）；
}
</style>
<body>
<h1 class="new">标题A</h1>
<h1 class="new">标题B</h1>
<h1>标题C</h1>
<h1>标题D</h1>
<h1>标题E</h1>
</body>
</html>
这段代码的运行结果如图20-3所示。
另外，还有一种在样式表中追加图像文件的方法，就是把它作为元素的背景图像文件来追加。例如代码清单20-4的示例中，同时对两个标题元素追加图像文件，对第一个标题元素采用before选择器，对第二个标题元素采用追加背景图像的方法来追加。在浏览器中显示的时候，这两种追加的结果看不出有什么区别。
图20-3 使用选择器插入图像文件的示例
代码清单20-4 同时采用两种方法追加图像文件的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http：//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同时采用两种方法追加图像文件示例</title>
</head>
<style type="text/css">
h1.head01:before{
content:url（new.gif）；
}
h1.head02{
background-image:url（new.gif）；
background-repeat:no-repeat;
padding-left:28px;
}
</style>
<body>
<h1 class="head01">标题A</h1>
<h1 class="head02">标题B</h1>
</body>
</html>
图20-4 同时采用两种方法追加图像文件示例
但是，在打印的时候，如果设定为不打印背景的话，使用before选择器追加的图像文件能够正常打印，但是使用追加背景图像的方法追加的图像文件就不能正常打印了。
譬如，在Firefox浏览器中运行代码清单20-4中的示例代码，然后点击"文件"菜单下的"打印预览"子菜单，在弹出的打印预览对话框中，点击页面设置按钮，在弹出的页面设置对话框中将"打印背景（颜色和图片）"复选框设为非选取状态，然后关闭页面设置对话框，观察打印预览对话框中的画面，画面变为如图20-5所示。
图20-5 将打印时的页面
设置修改为不打印背景
相关HTML 5与CSS 3权威指南：插入图像文件的好处