CSS问题包装

我正试图以不同的方式包装我的网站，以便将背景分为2部分。灰色部分是主要背景，但白色部分较小，包裹主要内容

基本上我想看起来像

---

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

我不建议使用图像。太大了。这里有两种方法。不要忘记，

rgba（）

在[lte ie 8]中不起作用（我想是吧？）。此外，我还使用了

：before

伪代码，以便将其放置在元素之前，但您可能会发现这不是必需的。但是使用伪元素可以定位效果

#element: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:'';
}
#element{
    background:#CCCCCC;
}

对于ie（我真的很推荐。老实说，我不会为ie lol而烦恼）只使用十六进制颜色，使用你身体的背景色

#element{
    background:linear-gradient(top,#000000 0%, #CCCCCC 100%);
}

此外，lte ie 9无论如何也不能使用线性渐变属性

另一种方法是使用

box shadow

，但这无法实现您所寻找的透明渐变

#element{
    box-shadow:0px 0px 3px #000000;
}

---

对，我看了一下。让我知道结果

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

---

我遵循了你的建议，但是我的网站现在看起来有点混乱。@LouisG.Talbot抱歉！哈哈，我真的没有提供定位等等。很难解释。我会再看看你的网站，给你定位和元素等。是的，图像应该是部分隐藏。嗯，如果你看网页，我的设计似乎仍然是坏的。