Question

我的设计师认为这不可能做到，但对我来说似乎是可能的。（虽然我的CSS经验有限）。但是，他也说过背景无法修复，而且过去的堆栈溢出证明了他的错误;所以我质疑他的知识。

如果无法在纯CSS中完成此操作，则可以使用JQuery。 alt text

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

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

如果顶部和底部都是固定的，我也想。

在一个完美的世界（没有IE的一个）中，id喜欢用1个DIV中的css3渐变和多个背景来做到这一点。但是，因为IE9尚未出现，我认为接近它的最佳方法是在DIV容器中使用2个div并使用PNG重复背景作为顶部div。

应该注意我将使用css3pie.com为IE6-8允许一些CSS3（但我不想依赖它，除非100％经过验证）

这只能用CSS吗？你会怎么做？

如果只有CSS不可能，有没有办法让JavaScript / JQuery帮助？我认为1280 x 1024的基础不是最好的主意，因为它似乎有一个奇怪的无线电。

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

我已经成功地想出了两种方法：

方法1

Click here to view demo

使用CSS3 background-size我可以使用div将2个min-height: 50%元素设置在彼此之上，然后使用background-size: 100% 50%他们成功完成我要找的内容

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

<小时/> 方法2

Click here to view demo

根据我从 A List Apart （Article | Example1 | Example2）找到的示例。我使用了示例1中的技术＃2，并且我能够使用CSS2模拟我想要做的事情。（我不是100％确定这是如何或为什么这样做，但它确实如此）

因为我也将使用CSS3PIE为IE6-8 CSS3提供linear gradients，border-radius和box-shadow的能力;我选择使用线性渐变而不是顶部背景的图像。

<强>问题

来自技术＃2的CSS2方法，示例1不能正确使用IE6
在所有当前的Internet Explorers中创建过多的延迟

Answer 2

只能使用CSS。不需要PIE。只是一个IE6错误和一些过滤魔法。

演示： http://www.bundyo.org/test/FPB.html

Answer 3

使用raphaeljs执行此操作。创建一个成为画布的背景DIV，将rect绘制到页面高度的50％（如果使用jquery，则使用$(window).resize()监视窗口大小调整，$(window).height()以获得50百分比为像素）。

你可以填写raphealjs rect并指定它的填充值为fill: "90-#000000-#ffffff"

至于图像：使用raphealjs'image放置图像或者使用HTML嵌入图像并使用如上所述的jquery更新它的高度比例。

我最近刚使用大约10行代码做过类似的事情。

另外：更改你的water.png，它大约是275kb，你页面上的下一个最大文件（css）就像1.5kb。

Answer 4

如果你想在屏幕上保持50％的水平，我会建议一个更简单的方法;

在Photoshop中创建一个图像（可能大约1280宽）底部的水和顶部的渐变。将顶部渐变淡入浅蓝色（例如＃68b）。将图像的左侧，右侧和底部淡入相同的纯色（＃68b）。

按如下方式设置页面背景;

html {
background: #68b url(waterimage.png) center center no-repeat;
}

在您的情况下，您可能希望将背景应用于#wdth-100而不是html，但这一切都取决于您要将背景放在哪个元素上。

全部完成。如果这对您有用，请告诉我。

Answer 5

我没有指向您的顶部图片的链接，所以我在顶部和底部使用了相同的图像。你可能应该为常规浏览器和JS for IE使用CSS解决方案。

<script type='text/javascript'>

$(document).ready(function() {
    wh=$(window).height();
    ww=$(window).width();
    if(wh%2) {
        h1=Math.round(wh/2);
        h2=Math.round(wh/2)-1;
    } else {
        h1=h2=wh/2;
    }
    img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
            .css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
    img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
            .css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});


    $(document.body).append(img1);
    $(document.body).append(img2);
});
$(window).resize(function() {
    wh=$(window).height();
    ww=$(window).width();
    if(wh%2) {
        h1=Math.round(wh/2);
        h2=Math.round(wh/2)-1;
    } else {
        h1=h2=wh/2;
    }
    $('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
    $('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>

Answer 6

实用的答案似乎是使用具有自己背景的多个div来做到这一点，所有这些都将使用z-index绝对定位在其他所有内容之后。

我知道这不是带有一些神奇CSS的单个div的干净标记解决方案，但在任何浏览器中纯CSS都是一个棘手的问题，如果你需要支持IE6，几乎肯定是不可能的。

更实用的答案是说“我会尽可能地支持IE6，但如果它不能支持我可爱的背景效果，那么对于仍在使用它的人来说，这只是运气不好”。

2部分CSS“壁纸”调整大小到浏览器

6 个答案: