Question

我正在为其他人设计的客户制作网站。该网站本身相对简单，但我似乎无法围绕一个特定的事情。请查看以下屏幕截图：

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

如果我希望这两个绿色背景（顶部和底部）在调整大小时保持与内容（960px - 边距0自动）保持一致，那么我将如何制作我的html / css结构，而当时我也希望“永不结束”将窗户扩展到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。

DEMO

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：

DEMO

.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;
}

HTML / CSS div结构

3 个答案: