CSS 问题 - 包装

Question

我正在尝试以不同的方式包装我的网站，以便将背景分为 2 部分。灰色部分是主要背景，还有白色部分，它较小并包装主要内容。

基本上我想要this看起来像this .

我不太确定如何添加图像来创建阴影效果，我也不知道如何创建白色 wrapper 。

Answer 1

正确的看了一眼。让我知道结果。

.main-content{
   background:#FFFFFF;
   width:90%;
   margin:0% 4% 0% 5%;
}

简单的解决方法:

.main-content{
    -webkit-box-shadow:0px 0px 3px 5px #000000;
    -moz-box-shadow:0px 0px 3px 5px #000000;
    -o-box-shadow:0px 0px 3px 5px #000000;
    box-shadow:0px 0px 3px 5px #0000000;
}

或者你要求的渐变:

.main-content:before{
    background:-webkit-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-moz-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-o-linear-gradient(top,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    background:-ms-linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    background:linear-gradient(top,rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    content:'';
    z-index:98;
    position:relative;
    width:105%;
    height:400px;
    left:-2%;
}

但这种渐变方法仅适用于支持“webkit”及其更新对应部分的浏览器。但我还没有真正测试过它，所以你可能想尝试一下等等。如果你不喜欢它，试试 box-shadow 方法 :)

您需要调整元素 div.bann 以更正一些定位错误。元素中有一个，因为该元素比图像高。

.bann{
    width:90%;
    height:auto;/*probably can remove this*/
    margin:0% 4% 0% 5%;
    padding:0px;
} 
.bann>img{/*not required if you haven't adjusted the image. You can remove this completely.*/
    width:100%;
    height:auto;
}