根据内容增加背景图像大小

Question

请看下面的图片

我正在开发分页。根据分页内容上方的图像，页码应该由花式边框包围，这样的边框不可能通过css border属性。我必须使用图像，但问题是如果我使用固定大小的背景图像，那么当页面数量增加时，它们将显示在背景图像之外。

如何使背景图像也随页数增加。

我希望这是有道理的。

Answer 1

您有2个选项 - 使用border-radius或使用background-image。

如果你要使用border-radius（注意它在IE8及更早版本中不受支持）：

.pager-container {border-radius：5px 0 5px 0; border：1px solid #ccc;}

如果你使用background-image，首先需要为你的背景创建一个精灵（下面的精灵将扩展到800px）。

现在你有了你的精灵，你需要将你的分页包装在2个包装器中并将精灵图像应用到两者并只需用background-position移动它就可以将它放到适当位置：

<div class="pager-container">
<div class="pager-container-inner">
   <a>1></a>
</div>
</div>

.pager-container, .pager-container-inner {height:25px;background-image:url(sprite.gif);background-repeat:no-repeat;}
.pager-container {background-position:0 0}
.pager-container-inner {background-position:100% -25px;}