如何拉伸背景图片

Question

我在ASP.Net Webforms应用程序中使用渐变背景，如下所示：

<div style="background-image: url(foo.jpg) repeat-x;">
    ... Injected HTML codes
</div>

其中foo.jpg是一个200x1像素的图像。我的问题是，注入的HTML的高度因数据网格的大小而异，从大约200像素到1000+像素不等。此外，这段代码是一个使用div元素来定位内容的更大页面的一部分。

我想要的是，在HTML被注入后，背景自动拉伸以适应空间，使渐变平滑地应用于整个高度。

- photo_tom

Answer 1

CSS无法拉伸背景图片。

然而，IMG元素可以被拉伸，所以你可以在网格之前放置一个IMG，使用CSS给它position: absolute和z-index:-1，并使用jQuery将其尺寸设置为与网格相等。

- SLaks

---

+1 - 对于CSS 2及之前的版本是True。CSS 3（仍然是工作草案）通过background-size属性支持背景大小调整。请参见http://www.css3.info/preview/background-size/。然而，真正重要的是浏览器支持，在这种情况下遗憾地缺乏。 - Brandon

+1 如果你将img和grid放在一个绝对定位的元素（比如一个div）中，你就可以省去使用JavaScript，只需为图像元素添加width: 100%和height: 100%，即可完成前面提到的CSS设置。 - moorej

Answer 2

我正在研究如何实现SLaks的解决方案，并发现了一个适用于我的情况的“hack”。虽然它不能进行拉伸操作，但我以一种适合我的方式模拟了它，并且它是100%的CSS。我不声称这是一个通用解决方案，但它对我有效。

为了回答这个问题，我需要更精确地定义我的问题。在我的原始代码中，

<div style="background-image: url(foo.jpg) repeat-x;">
... Injected HTML codes
</div>

foo.jpg 是一个从一种颜色渐变到白色的 600px x 1px 渐变背景，这个颜色是网站的主题色。这样在大屏幕上，我可以得到非常平滑的颜色过渡效果。虽然它没有完全延伸到底部，但我可以接受。问题出现在当我需要呈现一些仅显示 300px 高度的数据时。那么只有渐变中的 300px 显示出来，导致颜色出现“丑陋”的跳变。这正是我通过调整大小想要解决的问题。

虽然调整背景大小是技术上更干净的解决方案，但我所做的是

<div style="background-image: url(foo.jpg) repeat-x;">
    <div  style="background-image: url(fooBottom.png) repeat-x; background-position: bottom;"
       ... Injected HTML codes
    </div>
</div>

对我来说，fooBottom.png是一张200像素宽、1像素高的图片，底部为100%白色，顶部为100%透明。

内部关键点是“background-position: bottom;”，这将定位新的背景区域。如果对我显示的区域高度>800像素，则此新代码在视觉上不起作用。

但是对于短于800像素的区域，底部图像会靠近顶部。这种覆盖发生是因为内部块在外部块之上绘制。然后，如果区域变短，底部背景图像将覆盖越来越多的顶部背景图像。

但由于底部图像中的透明度，它确保在较短的区域中，底部有一个混合到白色的效果。

我将在我的个人网站上创建一个博客，展示示例。当我完成示例时，我将更新此帖子。

---

更新 - 我已经在http://sntsoftware.com/Blog发布了一个可用的示例。

- photo_tom

Answer 3

我以前也遇到过你的情况，最终我为不同分辨率变化准备了大约五个不同的背景图片。如果这是他们第一次访问网站（没有cookie存在），我会向他们呈现一个着陆页，在其中使用Javascript设置一个带有客户端分辨率值的cookie（请参见我的博客文章中的getViewportDimensions函数）。在服务器端，我在下一个请求中评估分辨率，并选择要注入到我的CSS中的图像。它运行良好。请确保在服务器端设置默认分辨率，以防用户代理禁用了Javascript或cookie。

- Josh Stodola