css - 如何在 jQuery Mobile CSS 中拉伸(stretch)背景图像以适应所有屏幕尺寸

Question

我有一个网站，可以为具有不同外形规范的手机和平板电脑提供服务。我有一张我想要用于主页的背景图片，我希望该图片可以拉伸(stretch)(可能扭曲)以适应可用区域。

执行此操作的最佳方法是什么？

是否有一个好的替代方案可以合理地适应各种不同的外形尺寸(即平板电脑/手机)而不会扭曲图像？

===============================

更新

我利用了这段代码。

.transparent-background {
    background: transparent;
}

.background-image {
  background: url(app-background.jpg);
  background-repeat:none;
  background-position:center center;
  background-attachment:scroll;
  background-size:100% 100%;    
}

我将透明背景作为类添加到页面和内容元素，然后将背景图像类添加到页面元素，这似乎可以解决问题。

Answer 1

你试过 CSS3 属性 background-size:cover;

http://www.css3.info/preview/background-size/

If the cover keyword is the used, the background image is scaled, again preserving the image’s original proportions / aspect ratio, this time to be as large as possible so that the background positioning area is completely covered by the background image, ie. both the images width or height are equal to or exceed the background positioning area. As such, again depending on whether or not the proportions of the background image match those of the background positioning area, some parts of the background image may not be in view within the background positioning area.

它并不与所有浏览器兼容，但对于设备应该没问题 - Compatibility