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

Question

看下面的图片

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

我该怎么做才能使背景图像也随着页数的增加而增加。

我希望这是有道理的。

Answer 1

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

如果您要使用border-radius（请注意，IE8 和更早版本不支持它）：

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

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

现在你有了你的精灵，你需要将你的分页包装在 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;}