2部分CSS“墙纸”，可以调整到浏览器。

My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and * has proved his wrong in the past; so I question his knowledge.

我的设计师认为这是不可能的，然而对我来说似乎是可能的。(虽然我的CSS经验有限)。然而，他也说背景无法修复，*过去证明了他的错误;所以我质疑他的知识。

JQuery can be used if this cannot be done in pure CSS.

如果不能在纯CSS中实现，可以使用JQuery。

The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.

上半部分将是一个梯度，有充分的灵活性，倾斜左，右，上，下，没有太多的扭曲。下半部分是理想的1280 x 1024分辨率的图像(因为这是最流行的浏览器显示分辨率)。然后根据需要，它将绘制草图并倾斜到它需要的任何大小。仍然允许所有的图像被看到。

The ration between the top half and bottom half is always 50% 50% independent of browser resolution.

上半部分和下半部分之间的比例总是50%独立于浏览器分辨率。

I would also like if both the top and bottom parts are fixed.

我还想知道顶部和底部是否都是固定的。

In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.

在一个完美的世界(一个没有IE),我想做这个css3梯度和多个背景1 DIV。然而,因为IE9不是,但我认为最好的方法是使用PNG 2在一个DIV容器DIV和重复背景上面DIV。

It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)

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

Is this possible with just CSS? How would you do it?

仅仅用CSS就可以吗?你会怎么做?

If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid? I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.

如果仅仅使用CSS是不可能的，有什么方法可以让JavaScript/JQuery提供帮助吗?我认为1280 x 1024的基数不是最好的主意，因为它似乎有一个奇怪的收音机。

Edit 1

编辑1

Oh yeah, I have a WIP too: http://meyers.ipalaces.org/extra/

我也有一个WIP: http://meyers.ipalaces.org/extra/

It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.

1280 x 1024看起来不错……现在它只是将顶部DIV的整个大小调整为50%所以图像是50%

I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.

我还是希望看到所有的水，因为我喜欢底部岩石的样子。然而，我愿意接受那些没有达到我想要的目标的想法。

Edit 2

编辑2

How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart

使用顶部的渐变作为真实的CSS2背景，然后在底部设置一个来调整大小，怎么样?也许这将允许CSS2的能力。我在这里引用了一些变通的技巧:一个列表

Edit 3

编辑3

I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.

我仍然在寻找在IE6上工作的结果，并且不会导致Internet explorer延迟。我悬赏50英镑以吸引更多的关注。

6 个解决方案

#1

I have successfully came up with 2 ways to do this:

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

Method 1

方法1

Click here to view demo

点击这里查看demo

Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.

使用CSS3后台大小，我可以设置2个div元素，每个元素的最小高度为50%，然后使用后台大小为100%，它们成功地完成了我所寻找的内容。

This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...

这个方法只是概念的证明，因为IE6-8不支持后台大小，所以我没有很好地对这个方法进行调整。就目前的情况而言，当你滚动时，它会出现混乱，尽管它有背景附件:固定;我抛弃了CSS3方法，以便使用CSS技巧寻找更好的方法。

---

Method 2

Click here to view demo

点击这里查看demo

Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)

下面是我从列表中找到的示例(第|条示例1 | Example2)。我使用了示例1中的技巧#2，并且我能够利用CSS2模拟我想要做的事情。(我不能百分之百地肯定它是如何起作用的，或者为什么起作用，但它确实起作用)

Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.

因为我也将使用CSS3PIE给IE6-8 CSS3做线性梯度，边界半径和盒形阴影的能力;我选择使用线性渐变而不是图像作为上背景。

Problems

问题

• CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
• 技术#2中的CSS2方法，示例1不能正确地使用IE6
• Creates excessive lag in all current Internet Explorers
• 在所有当前的Internet explorer中创建过多的延迟

#2

It can be done with CSS only. No PIEs necessary. Just an IE6 bug and some filter magic.

它只能用CSS完成。没有必要派。只是IE6的一个bug和一些过滤器的魔力。

Demo: http://www.bundyo.org/test/FPB.html

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

#3

Do this using raphaeljs. Create a background DIV that becomes a canvas, draw a rect to 50% of the page height (if using jquery then use $(window).resize() to monitor for a window resize and $(window).height() to get the 50% into pixels).

使用raphaeljs这样做。创建一个变成画布的背景DIV，将矩形绘制到页面高度的50%(如果使用jquery，那么使用$(window).resize()来监视窗口大小，使用$(window).height()将50%绘制成像素)。

You can fill in the raphealjs rect with specifing it's fill value to something like fill: "90-#000000-#ffffff"

你可以在raphealjs rect中填充它的填充值，比如填充:“90-#000000-#ffffff”

As for the image: Place the image using raphealjs' image OR just embed it using HTML and update it's height-scale using jquery as mentioned above.

对于图像:使用raphealjs的图像放置图像，或者使用HTML嵌入图像，使用jquery更新图像的高度。

I've done something like this just recently using about 10 lines of code.

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

Also: Change your water.png, it's about 275kb, where as the next largest file on your page (the css) is like 1.5kb.

另外:改变你的水。png大约是275kb，而页面上的下一个最大文件(css)大约是1.5kb。

#4

If you want to keep the horizon of the water at 50% on your screen, I would suggest a simpler method;

如果你想让屏幕上的水平线保持在50%，我建议你用一种更简单的方法;

Create an image (probably about 1280 wide) in Photoshop of water on bottom and gradient on top. Fade the top gradient into a solid light blue(#68b for example). Fade the left, right and bottom of the image into the same solid color(#68b).

在Photoshop中创建一个图片(大概1280宽)，图片底部是水，顶部是渐变。将顶部的渐变渐变淡蓝(例如#68b)。将图像的左边、右边和底部淡入相同的纯色(#68b)。

Set the background of your page as follows;

设置您的页面背景如下;

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

In your case, you'll probably want to apply the background to #wdth-100 instead of html, but it all depends on which element you want to put your background on.

在您的示例中，您可能希望将背景应用到#wdth-100而不是html，但这完全取决于您希望将背景放在哪个元素上。

All done. Let me know if that works for you.

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

#5

I don't have a link to your top image, so i used the same image for top and bottom. You should probably use a CSS solution for normal browsers and the JS for IE.

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

<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>

#6

The pragmatic answer would seem to be to do it using multiple divs with their own background, all of which would be positioned absolutely and behind everything else using z-index.

务实的答案似乎是使用具有各自背景的多个divs来实现，所有这些都将被放置在绝对的位置，并使用z-index来隐藏其他所有东西。

I know that's not the clean markup solution with a single div with some magic CSS, but this is a tricky problem in pure CSS in any browser, and almost certainly impossible if you need to support IE6.

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

An even more pragmatic answer would be to say "I'll support IE6 as far as I can, but if it can't support my lovely background effect then that's just tough luck for anyone still using it".

一个更加务实的回答是:“我将尽我所能支持IE6，但如果它不能支持我可爱的背景效果，那对任何还在使用它的人来说都是不幸的。”