如何以編程方式拉伸圖像？

Question

我的主頁上有一個豎線。 它實際上是一張看起來像這樣的圖像：

白框是將動態添加的產品圖像的占位符。 我想知道如何在添加新產品圖像時拉伸藍色豎線。 這必須以編程方式完成。

Answer 1

將圖像用作背景並垂直重復。

像這樣

<style>
    .pageBG { background: url(your_image_source) repeat-y; }
</style>
<div class='pageBG'>
    <!--your content goes here -->
</div>

從您的圖像中，我認為您可以制作尺寸為5 * 5或類似尺寸的小圖像，並使其在垂直和水平方向上重復。 為此，您不必設置背景位置，因為repeat是background-position的初始值。

Answer 2

為什么要完全使用圖像？ 為什么不簡單地為div設置背景顏色：

<style>
    .pageBG { background: #35f; }
</style>

您不需要在背景中出現白洞即可顯示圖像。