在屏幕中央固定宽度的div，两边的任何一边用来填充屏幕的其余部分？

所以，我在这里有这个美好的形象：在屏幕中央固定宽度的div，两边的任何一边用来填充屏幕的其余部分？

而且它是什么是一个网站的标题 - 点击它来查看它全尺寸..

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

未涂黑必须始终停留在页面的中心，而不是移动区域。黑色区域必须延伸至屏幕宽度的100％并具有平铺的背景渐变。

这怎么办？

我试图这样的事情：

凡绿色是具有固定宽度的格并居中黄色是“捻”梯度位，然后红色/蓝色是平铺梯度。但是这不起作用，因为在浏览器调整大小时，平铺渐变不符合“旋转”的位置。

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

来源

2011-09-02 betamax

我不知道为什么你真的想通过将图像切成碎片来实现这个目标？

拍摄图像，将画布延伸至5000px，然后重复两侧的渐变。你可能会增加大约200字节（是，字节，而不是千字节）到图像大小，但是你可以把它全部加起来，而不需要为单独的页面添加2个请求。

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

Extened image here

而作为中心DIV是固定的宽度，既可以添加一个容器有背景或背景添加到BODY例如。

来源

2011-09-02 13:43:59 margusholland

是的，你是对的，我认为我是在复杂的事情..我做了7000像素宽的图像和使用后[ImageOptim]（http://imageoptim.pornel.net/），它只有3,282字节！ – betamax

嗯，我想我已经成功地做到这一点..

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

来源

2011-09-02 12:21:57 betamax

标识做同样的事情，你开始与一个“捻”做做文章，在外面两个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（“扭曲”）被定位在浏览器的相同位置（中间，看到50％，但可以设置为从右边200px等），其他两个浏览器窗口大小发生变化时div扩展。 z-index将css分层，所以z-index为10的第一个在最上面（只要它是最高的数字，数字就没有问题了，但如果这样留下来就可以在下面添加更多图层改变z-index，其他两个z-index为1和2，只要它们小于顶部div，它并不重要，这让第一个div坐在这两个div上面，隐藏在哪里他们见面。应该工作，让我知道它是如何，如果需要生病修复一些事情。

来源

2011-09-02 13:25:10 Nathan

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

来源

2011-09-02 13:49:33 IMI

在屏幕中央固定宽度的div，两边的任何一边用来填充屏幕的其余部分？

回答

相关问题