Question

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

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

其中foo.jpg是200x1像素的图像。我的问题是，注入的HTML的高度从大约200px变化到1000 + px，具体取决于数据网格的大小。此外，此段是用于定位内容的更大页面的一部分。

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

Answer 1

CSS无法拉伸背景图像。

但是，可以拉伸IMG元素，因此您可以将IMG放在网格之前，使用CSS为其提供position: absolute和z-index:-1，并使用jQuery将其维度设置为等于网格。

Answer 2

我正在研究如何做SLaks解决方案并发现一个适合我情况的“黑客”。虽然它没有进行拉伸操作，但我正在以适合我的情况的方式模拟一个，它是100％的CSS。我并不认为这是一般解决方案，但它对我有用。

要回答这个问题，我需要在我对问题的定义中更准确一些。在我的原始代码中，

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

foo.jpg是600px x 1px渐变，从颜色到白色，这是网站的颜色。这样在较大的显示器上，我可以从颜色到白色进行非常平滑的过渡。它不会一直到底是我可以忍受的东西。当我需要渲染一些只显示300px高的数据时，就会出现问题。然后在渐变显示中只有300像素的600像素。导致颜色的“丑陋”阶跃变化。这是我真正需要通过调整大小来摆脱它。

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

<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对我来说是200px x 1px的图像，底部是100％白色，顶部是100％透明。

内心的关键是“背景位置：底部;”这将定位新的背景部分。如果为我显示的部分高度> 800px，则此新代码在视觉上不起任何作用。

但对于短于800px的部分，会发生的情况是底部图像越接近顶部。发生此覆盖是因为内部块被绘制在外部块的“上方”。然后，如果该部分变短，则底部背景图像覆盖越来越多的顶部背景图像。

但是由于下部图像的透明度，它确保在较短的部分上，底部会混合成白色。

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

更新 - 我在http://sntsoftware.com/Blog

发布了一个工作示例

Answer 3

我以前一直在你的情况下，我最终得到了大约五种不同的背景图像来分辨变化。如果这是他们第一次访问该网站（没有cookie存在），我会向他们展示一个登陆页面，我在其中设置一个cookie（使用Javascript），其中包含客户端解析的值（请参阅我的getViewportDimensions函数this blog post）。在服务器端，我评估了下一个请求的分辨率，并选择在我的CSS中注入哪个图像。它运作良好。如果用户代理已禁用Javascript或cookie，请务必在服务器端设置默认分辨率。

你如何拉伸背景图像

3 个答案: