如何拉伸背景图像

CSS无法拉伸背景图像。

但是,img元素可以被拉伸,因此您可以将img放在网格的正前方,使用css将其赋予 position: absolute 和 z-index:-1 ,并使用jquery将其维度设置为与网格相等。

我正在研究如何解决slaks问题,发现了一个适合我的情况的“黑客”。虽然它不执行拉伸操作,但我正在以适合我的情况的方式模拟拉伸操作,它是100%CSS。我不认为这是一个通用的解决方案,但它确实对我有用。

要回答这个问题,我需要对我的问题有一个更精确的定义。 在我的原始代码中,

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

foo.jpg是600像素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是一个200px×1px的图像,底部为100%白色,顶部为100%透明。

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

但是对于小于800px的部分,会发生的是底部图像越来越接近顶部。这种覆盖是因为内块绘制在外块的“上方”。然后,如果区域变短,底部背景图像将覆盖越来越多的顶部背景图像。

但由于较低图像的透明度,它可以确保在较短的区域,底部有一个混合到白色的区域。

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

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

我以前也遇到过你的情况,最后我得到了五张不同分辨率的背景图像。如果这是他们第一次访问该站点(不存在cookie),我会向他们展示一个登录页面,在该页面中,我设置了一个cookie(使用javascript)和客户端解析值(请参见 getViewportDimensions 功能在 this blog post )在服务器端,我对下一个请求的分辨率进行了评估,并选择在我的CSS中注入哪个映像。它工作得很好。如果用户代理禁用了javascript或cookie,请确保在服务器端设置了默认分辨率。