Question

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

基本上我希望this看起来像this。

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

Answer 1

Answer 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（我真的会推荐它。老实说，我不打算使用lol）只使用十六进制颜色，使用背景颜色作为身体。

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

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

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

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

Answer 3

正确的看看。让我知道结果。

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

CSS问题 - 包装

3 个答案: