CSS问题 - 包装

Question

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

基本上我喜欢this看起来像this。

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

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

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

您需要调整元素div.bann以纠正一些定位错误。元素中的a是因为元素高于图像。

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

Answer 2

你尝试过使用CSS3 Box-shadow property吗？

Answer 3

我不建议使用图像。太大了。有两种方法。不要忘记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（我真的会推荐它。老实说，我不打扰，即大声笑）使用只有六角形颜色使用你的背景颜色的身体。

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

除了lte ie 9之外无论如何都不能使用线性渐变属性！

另一种方法是使用box-shadow，但这不会达到您正在寻找的透明渐变。

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