如果这不能在纯CSS中完成,可以使用JQuery.
上半部分将是一个渐变,具有完全灵活的倾斜向左,向右,向上,向下,没有太多的扭曲.下半部分是一个理想的图像,适用于1280 x 1024分辨率(因为这是最流行的浏览器显示分辨率).然后根据所需的要求,它将草绘和扭曲到任何需要的尺寸.仍然允许所有的图像被看到.
上半场和下半场之间的比例始终是50％50％,与浏览器分辨率无关.
我也想如果顶部和底部都是固定的.
在一个完美的世界(一个没有IE),id喜欢这样做与css3渐变和多个背景在1 DIV.然而,因为IE9还没有出来,我认为最好的办法是在DIV容器中使用2个div,并使用顶部div的PNG重复背景.
应该注意的是,我将使用css3pie.com来允许一些CSS3为IE6-8(但我不想依赖它,除非100％证明)
这可能只是CSS吗？你会怎么做？
如果不可能只用CSS,有没有办法可以让JavaScript / JQuery来帮助？
我想,1280 x 1024的基础不是最好的主意,因为它似乎有一个奇怪的收音机.
编辑1
哦,是的,我也有一个WIP：
http://meyers.ipalaces.org/extra/
它看起来很好,在1280 x 1024 …现在,它刚刚得到的顶部DIV的整体调整大小为50％,所以图像是50％.
我仍然喜欢所有的水被看到,因为我喜欢底部的岩石的外观.但是,对于没有完成我想要的100％的替代想法,我很开放,但是接近尾声.
编辑2
如何使用顶层渐变作为真正的CSS2背景,然后只需放一个< img>在底部调整大小？也许这将允许CSS2的能力.我在这里参考一些技巧：A list apart
编辑3
我仍然在寻找在IE6上工作的结果,也不会导致Internet Explorer的滞后.我正在设置50的赏金,以吸引更多的关注.
解决方法
方法1
使用CSS3背景大小我可以设置2 div元素的顶部,最小高度：50％,然后使用background-size：100％50％,他们成功地完成了我正在寻找.
这种方法只是一个概念的证明,因为IE6-8不支持背景大小,我没有完全调整这种方法.现在,它当前滚动,尽管有background-attachment：固定;我放弃了这种CSS3方法,以便使用CSS技巧寻找更好的方法…
方法2
从A List Apart(Article | Example1 | Example2)发现的例子.我使用了示例1的技术#2,我能够使用CSS2来模拟我想要做的. (我不是100％肯定如何或为什么这个工作,但它)
因为我还要使用CSS3PIE给IE6-8 CSS3做线性渐变,边框半径和盒子阴影的能力;我选择使用线性渐变而不是顶层背景的图像.
问题
> CSS2方法从技术#2,示例1不能正常使用IE6>在所有当前的Internet Explorers中创建过多的滞后