如何以编程方式拉伸图像？

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>

您不需要在背景中出现白洞即可显示图像。