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

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，您首先需要为您的背景创建一个 sprite(下面的将扩展到 800px)。

现在您已经有了自己的 Sprite ，您需要将分页包装在 2 个包装器中并将 Sprite 图像应用于两者，然后使用 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;}