你如何拉伸背景图像

我有我喜欢使用一个渐变背景遵循一个ASP.Net Web表单应用程序：你如何拉伸背景图像

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

凡foo.jpg是200x1像素的图像。我的问题是，根据数据网格的大小，注入的HTML varys的高度从大约200px到1000 + px。此外，此细分是用于定位内容的更大的页面的一部分。

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

来源

2009-10-22 photo_tom

CSS无法展开背景图片。

然而，IMG元素可以被拉伸，这样你就可以在网格之前把一个IMG权，使用CSS给它position: absolute和z-index:-1，并且使用jQuery设置其大小等于电网。

来源

2009-10-22 19:02:10 SLaks

+1 - 真正的CSS 2和以前的版本。 CSS 3（仍然是一个工作草案）确实支持通过background-size属性设置背景大小。请参阅http://www.css3.info/preview/background-size/。这是浏览器的支持，虽然真的很重要，但在这种情况下可悲的是缺乏。 – Brandon 2009-10-22 19:41:52

+1如果你把你的img和网格放在一个绝对定位的元素（比如说div）中，你可以跳过使用javascript，只需在已经提到的图片元素的css中添加宽度：100％高度：100％。 – moorej 2009-10-23 04:35:49

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

来源

2009-10-22 19:11:23

我正在研究SLaks解决方案到底如何做，并发现了适用于我的情况的“黑客”。虽然它不能进行拉伸操作，但我正在模拟一种适用于我的情况的方法，它是100％CSS。我不认为这是一个通用的解决方案，但它确实对我有用。

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

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

foo.jpg是从颜色为白色是网站的颜色600px的x 1像素的梯度。通过这种方式在较大的显示器上，我可以非常平滑地从颜色过渡到白色。它不会一直走到底部是我可以生活的地方。当我需要渲染一些只显示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对我来说是一个200像素的图像1px的是在底部100％白和100％透明的最佳。

内在的关键是“背景位置：底部”这将定位新的背景部分。如果为我显示的部分高于800px，则此新代码不会进行任何视觉处理。

但是对于小于800px的部分，底部图片会更靠近顶部。出现这种情况是因为内部块被绘制在外部块的“上方”。然后，如果该部分变短，底部背景图像将覆盖越来越多的顶部背景图像。

但由于较低图像的透明度，它可以确保在较短的部分上，底部会出现白色混合。

我要在我的个人网站上创建一个展示示例的博客。当我完成示例时，我会更新这篇文章。

更新 - 我已工作的例子在http://sntsoftware.com/Blog

来源

2009-10-23 10:53:26

你如何拉伸背景图像

回答

相关问题