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、最初に背景用のスプライトを作成する必要があります (以下のスプライトは最大 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;}