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

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> 

您不需要在後臺顯示圖像的白洞。