固定宽度div在屏幕中央，两侧两侧填充屏幕的其余部分？

Question

所以，我在这里有这个美好的形象：

它是一个网站的标题 - 点击它查看它的全尺寸..

我需要使用HTML / CSS /图像重新创建它，我无法弄清楚如何。它必须是100％宽度，渐变从一种类型转换到另一种类型的点必须在调整大小时保持在同一位置。举例说明：

未涂黑的区域必须始终位于页面中央，不要移动。黑色区域必须延伸到屏幕宽度的100％，并具有平铺的背景渐变。

如何做到这一点？

我尝试过这样的事情：

其中绿色是具有固定宽度的div，居中的黄色是'旋转'渐变位，然后红色/蓝色是平铺渐变。但这不起作用，因为当调整浏览器大小时，平铺渐变与'旋转'的位置不匹配。

注意：这必须支持IE7 +，并且必须兼容跨浏览器，最好不使用javascript。

Answer 1

我不确定为什么你真的想通过将图像切割成碎片来实现这一点？

拍摄图像，扩展画布让我们说5000px，然后重复两边的渐变。您可能会在图像大小上添加大约200个字节（是的，字节，而不是千字节），但是您可以在不向页面添加2个单独背景请求的情况下完成所有操作。

然后将图像设置为background-position：center top;

由于中心DIV是固定宽度，您可以添加容器以获得背景或将背景添加到BODY中。例如。

Answer 2

嗯，我想我已经设法做到了..

<header>
    <div id="bg-left"></div>
    <div id="bg-right"></div>
    <div id="header-content">
        My header contents
    </div>
</header>

和

header {
    height:88px;
}
header #header-content {
    width:1004px;
    height:88px;
    position:absolute;
    left:50%;
    margin-left:-502px;
    background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
    position:absolute;
    height:88px;
}
header #bg-left {
    background-image:url("/img/header-bg-left.png");
    width:50%;
}

header #bg-right {
    width:50%;
    background-image:url("/img/header-bg-right.png");
    right:0px;
}

所以基本上，我在页面的中心创建一个固定宽度的div，然后在后面创建两个具有适当渐变背景的50％宽度div。

Answer 3

我做同样的事情，你开始做一个'旋转'居中，在外面有两个div ...我会这样做的方式是这样的：

这就是我所拥有的：

<div style="width:100%">
        <div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
        </div>
        <div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
        </div>
        <div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
        </div>
    </div>
    </div>

可在此处查看：http://sunnahspace.com/TEST.php

基本上你有一个容器div，如果你决定在所有id处移动它，那就是相对定位。然后你拿着渐变变化的那块，并使你的第一个内部div，不同的渐变你的第二和第三div。基本上，第一个div（“扭曲”）定位在与浏览器相同的位置（中间，见50％，但这可以设置为从右边说200px等）与另外两个当浏览器窗口大小改变时，div扩展。 z-index对css进行了分层，因此第一个z-index为10的数据位于顶部（只要它是最高数字，这个数字几乎不重要，但是这样可以让你在下面添加更多层而不需要更改z-index，其他两个z索引为1和2，无论哪个顺序只要它们小于顶部div，这就让第一个div位于这两个div的顶部，隐藏在哪里他们见面了。应该工作，让我知道它是怎么回事，如果需要生病，可以解决一些事情。

Answer 4

这是你想做的吗？ http://jsfiddle.net/nnZRQ/1/