当背景图片被一起加入后,就变得更富有创造性了。用Photoshop或者你喜欢的图片编辑器,创建一个10*10的图片,图片的顶部有黑色的边框,渐变的灰色一直到底部,象图2-6显示的。
图2-6:A 在Photoshop中创建10×10点大小的图片(被放大了)
我们可以用CSS把这个极小的图片平铺在<h1>的底部:
h1 {font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 14px;
background: url(10x10.gif) repeat-x bottom;
}
repeat-x会通知浏览器仅在水平方向平铺(repeat-y 将在垂直方向平铺)。我们再把图片设置在bottom,又增加了额外的padding-bottom,我们可以调节平铺的图片和上面文字之间的距离。(看图2-7)