javascript - 调整到浏览器大小的 2 部分 CSS "wallpaper"

Question

我的设计师认为这是不可能的，但在我看来这是可能的。 (尽管我的 CSS 经验有限)。不过他也说后台修不了，stackoverflow过去也证明他错了；所以我质疑他的知识。

如果这不能在纯 CSS 中完成，可以使用 JQuery。

上半部分将是一个完全灵活的渐变，可以向左、向右、向上、向下倾斜，而不会造成太多失真。下半部分是为 1280 x 1024 分辨率制作的理想图像(因为这是最流行的浏览器显示分辨率)。然后根据所需的要求，它会绘制草图并倾斜到它需要的任何尺寸。仍然允许看到所有图像。

上半部分和下半部分之间的比率始终为 50% 50%，与浏览器分辨率无关。

我也希望顶部和底部都固定。

在一个完美的世界(一个没有 IE 的世界)中，我喜欢在 1 个 DIV 中使用 css3 渐变和多个背景来做到这一点。然而，因为 IE9 还没有出来，我认为最好的方法是在一个 DIV 容器中放置 2 个 div，并为顶部的 div 使用 PNG 重复背景。

应该注意我将使用 css3pie.com 来允许 IE6-8 的一些 CSS3(但我不想依赖它，除非 100% 证明)

仅使用 CSS 是否可行？你会怎么做？

如果只用 CSS 做不到，有没有办法让 JavaScript/JQuery 提供帮助？ 我认为 1280 x 1024 的基础不是最好的主意，因为它似乎有一个奇怪的 radio 。

Edit 1

哦，是的，我也有一个 WIP: http://meyers.ipalaces.org/extra/

它在 1280 x 1024 下看起来不错...现在它只是将顶部 DIV 的整体大小调整为 50%，因此图像为 50%。

我仍然希望看到所有的水，因为我喜欢底部岩石的外观。但是，我对其他想法持开放态度，这些想法不能 100% 完成我想要的，但接近于此。

Edit 2

如何使用顶部渐变作为真正的 CSS2 背景，然后只放一个 <img>在它的底部调整大小？也许这将允许 CSS2 功能。我在这里引用了一些解决方法:A list apart

Edit 3

我仍在寻找适用于 IE6 且不会导致 Internet Explorer 延迟的结果。我将赏金设置为 50 以帮助吸引更多关注。

Answer 1

我已经成功地想出了 2 种方法来做到这一点:

方法一

Click here to view demo

使用 CSS3 background-size 我能够将 2 个 div 元素设置为彼此叠加 min-height: 50%然后使用 background-size: 100% 50% 他们成功地完成了我正在寻找的东西。

这个方法只是一个概念验证，因为 IE6-8 不支持 background-size，我没有追求完美地调整这个方法。就目前而言，尽管有 background-attachment: fixed;，但当您滚动时它目前会弄乱。我放弃了这种 CSS3 方法，以便使用 CSS 技巧寻找更好的方法......

---

方法二

Click here to view demo

按照我从 A List Apart ( Article | Example1 | Example2 ) 中找到的示例进行操作。我使用了示例 1 中的技术 #2，并且我能够仅使用 CSS2 来模拟我想做的事情。 (我不是 100% 确定它是如何或为什么起作用的，但确实如此)

因为我也要用CSS3PIE赋予 IE6-8 CSS3 执行线性渐变、border-radius 和box-shadow 的能力；我选择使用线性渐变而不是顶部背景的图像。

问题

• 技术 #2 中的 CSS2 方法，示例 1 不能正确地用于 IE6
• 在所有当前的 Internet Explorer 中造成过度延迟