CSS中背景图像定位中的百分数

假设有如下文件1.html

<style>
#p1 {
  text-align: right;
  padding-top: 15px;
  background: transparent url(images/footerline.gif) 100% 0 no-repeat;
}
</style>

<p id="p1">Paragraph 1</p>

在页面中的显示如下

这里footerlne.gif是一幅宽为2000px，高为14px的图片，螺旋状的图案只出现在图片的最右端，在样式中，padding-top:15px;为背景图片留出高度，而100%表示背景图片和段落的最右端，0表示背景图片和段落的顶端。

把样式中的100% 0替换为right top，显示效果相同。

如果把right top修改为left top，则螺旋状的图案不会出现。

对样式作如下修改

  padding-bottom: 15px;
  background: transparent url(images/footerline.gif) right bottom no-repeat;

则显示如下

 把right bottom替换为100% 100%，显示效果相同。