在圖像增加背景圖片的大小爲每個內容

Question

看看下面

我開發的分頁。根據分頁內容上面的圖片，頁碼應該被花式邊框包圍，這樣的邊框不可能通過css border屬性。我必須爲此使用圖像，但問題是如果我使用固定大小的背景圖像，那麼當頁數增加時，它們將顯示在該背景圖像之外。

我該如何去讓背景圖片也應該隨着頁數的增加而增加。

我希望這是有道理的。

Answer 1

您有2個選項 - 使用border-radius或使用background-image。

如果你要使用邊界半徑（注意是不支持IE8及以上）：

.pager容器{邊界半徑：5px的0 5px的0;邊界：1px的固體#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;}