html - HTML/CSS div 结构

Question

我正在为客户制作一个由其他人设计的网站。该网站本身相对简单，但我似乎无法专注于一件特定的事情。请看下面的截图：

http://cl.ly/image/0M090g150S28

如果我希望这两个绿色背景（顶部和底部）在调整大小时与内容（即 960 像素 - 边距 0 自动）保持对齐，但在将窗口扩展到，比方说，3000px？

永无止境的背景很容易。固定到居中 div 的触点的背景很容易。

但两者结合？请在这里帮助我，我已经为此烦恼了一段时间。这可能是超级简单..？！

干杯!

Answer 1

我不确定这一点，但你可能会做一些我曾经在雅虎样式表中看到的事情。为顶部和底部创建图像。然后为顶部的带有背景定位的html标签定义一个css规则背景图像，也对具有相同背景定位的底部图像执行相同的操作，这次将其附加到body标签。希望它有效

Answer 2

这是一个工作示例：http ://digitaldemo.net/stack-test.html

这是CSS：

htmo, body  { width:100% ;
height:100% ;
}

body    { background:#ececeb ;
margin:0 ;
padding:30px 0 ;
position:relative ;
font-family:arial,helvetica,sans-serif ;
font-size:16px ;
}

.top-left   { disply:block ;
width:395px ;
height:250px ;
background:url("top-left.png") no-repeat ;
position:absolute ;
top:0 ;
left:0 ;
z-index:-1 ;
}

.bottom-right { display:block ;
width:395px ;
height:250px ;
background:url("bottom-right.png") no-repeat ;
position:absolute ;
bottom:0 ;
right:0 ;
z-index:-1 ;
}

#container  { width:1000px ;
margin:auto ;
margin-bottom:20px !important ;
padding:20px ;
position:relative ;
top:0px ;
background:#ffffff ;
border:1px solid black ;
z-index:99999px ;
overflow:hidden ;
}

和 HTML：

<div id="container">

(your main layout and content go here)

</div>

<div class="top-left"></div> // this is the top left teal corner

<div class="bottom-right"></div> // this is the bottom right teal corner

希望这可以帮助！

Answer 3

在你的内容上使用两个巨大的伪元素怎么样，在它们上面设置背景并overflow: hidden在正文上使用。

演示

HTML：

<section class="main"></section>

CSS：

html, body, .main { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
}
.main {
    width: 490px;
    margin: 0 auto;
    position: relative;
    background: rgba(192, 186, 176, .7);
}
.main:before, .main:after {
    width: 1500px;
    height: 1000px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    background: linear-gradient(-30deg, transparent 54%, teal 54%);
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    background: linear-gradient(-30deg, teal 46%, transparent 46%);
    background-repeat: no-repeat;
}

我使用了 CSS 渐变，这在 IE9 和 IE8 中不起作用，但您可以简单地使用图像。

编辑：我刚刚有了另一个想法——你可以只使用边框而不是渐变，这样它就可以在 IE9 和 IE8 中使用。只需将 CSS 替换为伪元素：

演示

.main:before, .main:after {
    border: solid 500px teal;
    border-width: 500px 750px;
    position: absolute;
    content: '';
}
.main:before {
    right: 60%;
    top: 0;
    border-bottom-color: transparent;
    border-right-color: transparent;
    background-repeat: no-repeat;
}
.main:after {
    left: 60%;
    bottom: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    background-repeat: no-repeat;
}